vuerouter引⼊路由与路由配置容易犯错的地⽅与常见的报错与
处理报错
⾸先npm安装vue-router插件，就不说了
其次：
先看下我本地的⽬录结构吧
第⼀步：在src⽬录下新建⼀个专门存放router的index.js⽂件
⾥⾯的内容为：
import Vue from 'vue'  //注：这句必须要有，虽然在main.js⾥⾯已经引⼊过Vue，但是这⾥不要这句的话，就直接报错了Vue is not defined
import VueRouter from 'vue-router'
import conOne from '@/views/conOne'
Vue.use(VueRouter)
export default new VueRouter({
mode:'history',
routes:[          //注：此处的⽅法名，记住这⾥是routes，不是routers，没有r，要是写成routers，控制台不会报错，就是渲染不出组件来，牢记啊！不然会让⼈崩溃的
{
path:'/conone',
name:'conOne',
component:conOne  //注：此处容易跟着代码提⽰⼀不⼩⼼写成components，要注意，控制台报错TypeError: Cannot read property '$createElement' of undefined
} ] });
第⼆步：然后在main.js⾥⾯的内容
import Vue from 'vue'
import App from './App'
import router from './router'    //import后⾯的router只能写成router，且⾸字母⼤写都不⾏，不然在下⾯new Vue⾥⾯注⼊的时候控制台会报错Cannot read property 'matched'                      of undefined，为什么会这样，⽬前我也不太清楚，还望⼤佬指点
new Vue({
el: '#app',
router,      //记得在这⾥注⼊引⼊的router
components: { App },
template: '<App/>'
})
第三步：
在项⽬⼊⼝⽂件app.vue⾥⾯加上<router-view></router-view> //不加的话控制台不报错，但是组件始终渲染不出来，以前不熟悉的时候忘了在这⾥写上视图容器反正纠结过很久
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
}
},
react面试题中的router
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
  容易出错的地⽅⼤概有以下⼏点
1.新建的router⽂件夹的index.js⽂件没有引⼊import Vue from 'vue'这句话，导致报错Vue is not defined
2.在new VueRouter实例中的数组变量名routes写成routers，控制台不报错，但就是渲染不出组件内容，这也是最容易忽略也最容易犯错，也
是最难排查到问题原因的地⽅（个⼈认为）
3.main.js中引⼊router配置⽂件时命名变量名不是router，或者⾸字母写成⼤写，导致报错Cannot read property 'matched'
4.接着第三点在引⼊了router之后，容易忘记在下⾯new Vue实例中注⼊，报错Cannot read property 'matched' of undefined"
5.在app.vue⾥⾯忘了写路由视图组件<router-view></router-view>，⼀般来说，头脑清晰，⼜稍微熟悉⼀点路由是不会犯这个错的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。