技术的路上奔跑

入门

0%

vue使用笔记

发表于 更新于 分类于 ， Valine：
本文字数： 931 阅读时长 ≈ 1 分钟

一、安装和配置

  1. 先安装命令行工具
1
npm install -g @vue/cli
  1. 创建vue工程，会在当前目录创建工程名对应的目录
1
vue create xxx
  1. 跑起来
1
2
3
cd xxx
npm run build
npm run serve

二、开发

1. 路由

2. 路由事件

2.1. 点击导航到下一个页面

  • 不会触发beforeDestroy，会触发beforeRouteLeave，可以在里面做一些清理工作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
  },
  data() {
  },
  methods: {
  },
  beforeRouteLeave(to, from, next) {
    // 切换路由会触发
    next();
    console.log("beforeRouteLeave");
    if (this.timerHandler) {
      clearInterval(this.timerHandler);
      this.timerHandler = undefined;
    }
  },
  beforeRouteLeave() {
    // 切换路由没有触发
  },
});
</script>

小技巧与踩坑记

1. 进入子页面后刷新白屏或404

参考： https://www.codeqd.com/post/20250721061.html

让AI帮忙改成hash模式，按照http://host/#/xx/xx 这种模式，默认加载index.html，然后通过后面路径加载子页面，主要代码是

1
2
3
4
5
import { createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(),
  ...
})