VUE 常见路由问题

切换路由时显示 can't read property 'xxx' of null

如果通过this.$router.push({path:"路由地址"})切换路由，需要注意清除本页计时器（使用clearTimeout），清除周期性定时器（使用clearInterval）。

切换路由白屏或者404

如果通过this.$router.push()切换路由，需要注意，参数中的path字段需要是配置的路由地址（例如/abc/def/g），而非VUE模块地址./pages/abc/def/g.vue。

设置模块

若要在路由中引入模块，需要设置组件的name，name必须为横杠写法或者驼峰写法。如：helloWorld和hello-world。

不显示router-view组件，提示未定义router-view元素。

需要安装正确的vue-router版本，vue2应安装vue-router 2，vue3直接安装正常版本即可。

以vue2为例，卸载错误的vue-router版本，更改正确的vue-router。

npm uninstall vue-router
npm install vue-router@2 --save

刷新界面显示404

例如我访问abc.com，网站的配置模式为history，切换到abc.com/def，正常显示。刷新后显示服务器404页面。

这是因为如果我们使用vue跳转，会调用浏览器的History API，只更改地址栏的内容，不更改网页的实际内容。

第一种解决办法：更改路由模式为hash；

第二种解决办法：设置nginx或apache等服务器的配置

设置参数和可选参数

我们通常要给页面间的传递设置参数，常用的设置参数方式有两种：

• 使用Store，使用Store中的commit或action更改state，然后在另一个组件内访问Store。
• 使用Vue-Router，在path中设置参数，也是我们需要讲的：

我们可以设置path: "/abc/:def"。其中:def就是参数的位置，:代表参数选项，def代表参数名。

如果我们访问localhost/abc/helloWorld，那么就可以通过this.$route.params.def获得HelloWorld

但是我们如果不设置参数，就不会匹配这个router。为了匹配这个router，我们需要在def的后面添加一个英文问号“?”，这样就代表这个参数是可选的。

vue2使用echarts

如果在vue2中使用正确的echarts版本，在App.js中是可以正常使用echarts的。导入方式：Vue.prototype.echarts = echarts;

但是这样我们如果在路由的子组件内就无法访问。为此我们需要在各个组件内自行引入才可。