修改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文件