Vue-cli-4-路由配置文件，路由进阶，二级路由

Posted 2023-03-14

参考技术A vue.config.js    是vue的配置文件，必须创建在 demo根目录 下，该配置文件中，只能使用commonjs模块化语法，使用module.export导出，格式如下图。

@符号代表src资源目录，在vue.config.js文件中将路径解析，path.resolve是拼接路径方法。将@c定义为当前绝对路径

@c代表src目录下的components文件，@v代表src目录下的views文件，其他同理，后续在其他文件中引入文件时，只需要使用以下方法即可导入，不会随着文件目录的改变而改变。

1.路由模式

2.路由元信息

meta属性，配置路由的元信息，其实就是在每个路由身上配置一份数据

3.路由守卫

在meta对象中，可以配置一个roles属性，其中可以配置路由的访问权限，下图中可访问的人已标记为admin，vip及user

其次，在 router.beforeEach 及 router.AfterEach 中可以配置信息

router.beforeEach 是路由前置守卫，每次跳转路由之前，都会拦截，其中next()方法表示下一步（跳转）,其中是一个回调函数，其中有三个参数to,from,next

router.AfterEach是 路由后置守卫，其中可以将页面的title设置为meta属性中设置的title,其中是一个回调函数，其中有两个参数to,from

浏览器的访问权限可以在application中的session storage中添加一个roles：admin，如果路由信息中meta中未设置roles，则无法访问该设置了roles属性的路由页面

安装： npm install nprogress（给路由页面的跳转添加一个上方的进度条）

导入：

首先在页面views中创建一个文件夹，然后在该文件夹中创建两个二级路由页面，如下图所示

然后在所需要创建二级路由的一级路由创建信息中添加一个 children数组 ，该数组中添加二个对象，每个对象就是该一级路由页面的一个二级路由页面，如下图所示，该二级路由信息中的component信息采用了 路由懒加载 的方式导入

然后在一级路由页面one.vue中写入二级路由页面的router-link导航和router-view

最终效果如下图所示