路由鉴权：路由能不能被访问到权限的设置->全局守卫来完成

路由守卫

写法一

直接在 router->index.js 文件中写

import {
	createRouter,
	createWebHashHistory
} from 'vue-router'

// 省略了routes 中的路由规则
const routes = [
	...
	...
]

const router = createRouter({
	history: createWebHashHistory(),
	routes
})

// 全局守卫：登录拦截 本地没有存token,请重新登录
router.beforeEach((to, from, next) => {
    // 判断有没有登录
	
});

export default router

写法二

1. 重新创建一个文件，位置随意
2. 内容如下

import router from "../src/router/index.ts" // router文件的位置

router.beforeEach((to, from, next) => {
  // ...
  // 返回 false 以取消导航
  return false
})

3. 直接在main.js入口文件中导入 如下：

import "@/permisstion"

关键代码

const whiteList = ['/home','/home/list']
  if(token){
    next()
  }else{
    if(whiteList.includes(to.path)){
      next()
    }else{
      //跳转登录页面
      //这里可以换成下面的代码，跳回登录页的同时，记录点击的路由
        next({path:'/login',query:{red:to.fullPath}})
       // 然后在登录页面点击登录的时候，获取携带的参数，登录成功跳转回要去的页面
    }
  }

进度条

1. 安装npm i nprogress
2. 用在全局守卫中 导入：import NProgress from "nprogress"
3. 使用：

NProgress.start();开始，写在前置守卫，访问路由组件之前，进度条开始动
NProgress.done();结束，写在后置守卫，访问路由成功，进图条消失

4. 导入样式，不然也没有效果

import "nprogress/nprogress.css" 位置就放在上述步骤二的 import 下就行

5. 解决页面上右上角自带的加载效果

NProgress.configure({ showSpinner: false }); 写在import下就行

动态修改浏览器标题

1. 给路由配置添加元信息 如下：

  {
    path:'/home',
    component:Home,
    meta:{
      title:'首页'
    }
  }

2. 那么前置守卫中的to就有meta信息
3. 在前置守卫中修改浏览器的标题 如：

 document.title = '项目'+ to.meta.title