vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错
1.先看下我本地的目录结构吧
第一步:在src目录下新建一个专门存放router的index.js文件
里面的内容为:
易错点:
- index.js文件没有引入
import Vue from 'vue'
- routes此为方法名,别弄错成routers
- component,别弄错成components
- main.js中引入router配置文件
import router from './router'
- 在这引入了router之后,容易忘记在下面new Vue实例中注入
new Vue({
el: '#app',
router, //记得在这里注入引入的router
components: { App },
template: '<App/>'
})
- 在app.vue里面忘了写路由视图组件
<router-view></router-view>
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里面的内容
```bash
import Vue from 'vue'
import App from './App'
import router from './router' //import后面的router只能写成router,且首字母大写都不行,不然在下面new Vue里面注入的时候控制台会报错Cannot read property 'matched' of undefined,
Vue.config.productionTip = false
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{
}
},
}
</script>