vue-router的安装与使用

1、安装
npm install vue-router -S

2、使用
在项目中新建一个router文件夹，在router文件夹下新建一个index.js文件，index.js文件配置如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import layout from "@/views/layout/layout";//导入组件

//此处设置你的路由
const publicRoutes = [
	{
        path:'/',
        component: layout,
        redirect:'/index',
        children:[
            {
                path:'/index',
                name:'index',
                component: ()=> import("@/views/index/index"),
            }
        ]
    },
    //404页面放在最后
    { path: '*', component: ()=> import("@/views/error/noPage404") }
]

//路由声明
const router = new VueRouter({
    routes : publicRoutes
})

//导出路由
export default router

3、main.js配置

import Vue from 'vue'
import App from './App.vue'
import router from "./router";//导入路由

Vue.config.productionTip = false

new Vue({
  router,//路由挂载
  render: h => h(App),
}).$mount('#app')

4、使用vue-router的其他问题
Parsing error: Unexpected token import
在.eslintrc.js文件中添加：

"parserOptions": {
        parser: 'babel-eslint',//添加这行代码
        "ecmaVersion": 2018,
        "sourceType": "module"
    },

按需加载component无效时，
如下列中引入了component，但页面无显示

{ path: '*', component: ()=> import("@/views/error/noPage404") }

使用vue-cli生成项目，很可能在babel-loader没有配置上面的插件，这时需要我们自己去安装此插件：

npm install babel-plugin-syntax-dynamic-import --save-dev