修改vue路由时的遇坑记录

【适合跟博主一样的初学者看，欢迎指出错误与不足】

不看废话，查看完整版

1.运行新创建的Vue项目时报错:{ parser: “babylon” } is deprecated; we now treat it as { parser: “babel” }，最明显的特征是控制台的输出由红色变为白色。

解决：找到node_modules/vue-loader/lib/template-compiler/index.js

搜索 babylon ，并将其修改为 babel 即可。

2. (在创建新项目时已经集成了router)修改src/router/index.js
将routes的【值提取出来声明成常量routes】方便属性routes的值灵活更改，运行时显示的url链接中带有#，添加mode:'history’属性可去掉#。
http://localhost:8082/#/

修改后的代码：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)
const routes=[  // 此处常量的名称可以随意更改
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }
]
export default new Router({
 mode:'history',  //添加这个属性，去掉url中的#
  routes: routes   //第二个routes为上述常量名称  
})
//直接写routes也可以，但是【不可以随意更改名称】
// export default new Router({
//   routes
// })

3.代码位置还是src/router/index.js，分析修改后的代码，如果需要添加很多需要跳转的页面路径在当前页面中会很杂乱，于是将【const routes常量提取出来放入新建的文件】routers.js中。

router.js文件

再修改router.js文件，新添加一个跳转页面other

index.js文件

再进一步将index.js中Router中的参数提取出来

4.如果在路由跳转之前需要做一些事情，使用钩子函数时（比如判断用户是否登录，token是否过期等等），需要将路由声明为常量router，这个常量名【只能是router】，否则会抛出"TypeError: Cannot read property ‘matched’ of undefined"错误

将main.js中应用路由的代码改为 import {router} from ‘./router’，必须加上 { }

最终代码：

1.主要目录结构：

• src
  • components
    • HelloWorld.vue
    • OtherPath.vue
  • router
    • index.js
    • routers.js
  • App.vue
  • main.js

2. main.js

import Vue from 'vue'
import App from './App'
import {router} from './router' //必须加 {}

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

3.index.js

import Vue from 'vue';
import Router from 'vue-router';
//从文件routers中引入常量routes，必须加 {}
import {routes} from "./routers"; 

Vue.use(Router)

const routeConfig=
  {
  mode:'history',
  //第一个属性routes不可自定义名称
  //第二个常量routes可自定义名称
  routes: routes 
}
//常量名称只能是router，不可自定义名称
export const router= new Router(routeConfig);

router.beforeEach((to,from,next) =>{
  //do something
})

4.routers.js

//引用了HelloWorld模板
import HelloWorld from '@/components/HelloWorld'  
import OtherPath from '@/components/OtherPath'
const hello=
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }
  const other=
    {
      path: '/other',
      name: 'OtherPath',
      component: OtherPath
    }
export const routes=
  [
    hello,
    other
  ]

5.大概的调用关系
main.js -> router/index.js -> router/routers.js -> components/OtherPath.vue(HelloWorld.vue)