vue router引入路由与路由配置

vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错

1.先看下我本地的目录结构吧

第一步：在src目录下新建一个专门存放router的index.js文件
里面的内容为：
易错点：

1. index.js文件没有引入import Vue from 'vue'
2. routes此为方法名，别弄错成routers
3. component,别弄错成components
4. main.js中引入router配置文件import router from './router'
5. 在这引入了router之后，容易忘记在下面new Vue实例中注入

new Vue({
  el: '#app',
  router,　　　　　　//记得在这里注入引入的router
  components: { App },
  template: '<App/>'
})

6. 在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>