1.vue路由

1.约定大于配置

2.路由拦截

在 Vue 中，可以通过路由守卫进行权限控制和登录拦截。

路由守卫是在Vue.js中用于控制路由跳转的功能。它是一个函数，当路由变化时会触发该函数，可以在该函数中进行一些操作，如检查用户是否登录、检查用户的权限等。

【路由守卫写在main.js文件，或者写在router文件夹下的index.js文件】

在Vue.js中，路由守卫分为全局路由守卫和组件内守卫两种类型。

全局路由守卫是指应用中对所有路由生效的守卫。全局路由守卫又分为全局前置守卫和全局后置守卫。全局前置守卫在路由导航之前被调用，可以用来做一些全局的验证逻辑。全局后置守卫在路由导航之后被调用，可以用来做一些全局的操作逻辑。

全局守卫
router.beforeEach() 进入之前触发

router.afterEach() 进入之后触发

Vue 提供了三种路由守卫：

全局前置守卫：在每个路由进入前触发，常用于登录拦截和权限控制。

全局解析守卫：在路由被解析前触发，该守卫对于动态路由和嵌套路由非常有用。

全局后置守卫：在每个路由完成后触发，常用于页面统计和动画等。
每个守卫方法接收三个参数：

使用全局前置守卫beforeEach函数

router.beforeEach((to,from,next)=>{

//第一个参数to，包含的内容是跳转后的路由对象

//第二个参数from，包含的内容是跳转前的路由对象

//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止

})

示例：判断用户是否登录

import {createRouter,createWebHashHistory} from 'vue-router'
import Login from '../views/Login.vue'
import MainBox from '../views/MainBox.vue'
// #/login createWebHashHistory
// /login createWebHistory

const routes = [
    {
        path:"/login",
        name:"login",
        component:Login
    },
    {
        path: "/mainbox",
        name: "mainbox",
        component: MainBox
    }
]

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

// 路由拦截
router.beforeEach((to,from,next)=>{
    // 判断用户是否登录中的参数我们用“localStorage.getItem("token")”
    // 因为localStorage是前端的本地存储，然后呢后端返回的那些token、个人用户登录信息都存储到本地存储中
    // 如果已经登录了，那token就会返回出信息的，但没登录的话，token那就会返回undefined的
    // !取反 "!localStorage.getItem("token")"=>未登录
    if(!localStorage.getItem("token")){
        // 跳转登录
        next({
            path:"/login"
        })
    }else{
        next()
    }
})
export default router

运行后会发现控制台弹出警告，出现栈溢出问题，因为死循环了，”/login“永远都出不去了。

解决方法：

先判断页面是否在login登录页面，是的话就直接放行，不是且没有登录的话就跳转到登录页面。

控制台输入token值，保存到本地存储中，就可跳转到mainbox页面中。但如果token值过期也跳转不了。

3.动态路由的创建和配置

动态创建二级路由的方法：例如

1.创建一个专门放路由的文件"config.js"

2.提前设置好一个数组或者是一个对象形式的内容，再把这个对象或数组进行遍历，

3.然后依次添加成我们mainbox中的二级路由，

4.添加完成后我们在进行当前登录用户角色的判断，如果是管理员的话，我们会匹配管理员身份需要的路由给创建出来，如果不是管理员身份，那就会匹配不是管理员身份的路由创建出来。

所以我们要创建一个灵活的数组，根据数组的程度我们往mainbox中添加。

为防止每次跳转都会被路由拦截给拦截到从而都要遍历一次，我们必须记录第一次进入路由拦截才会进行配置，调用CongfigRouter。然而问题来了我们怎么实现记录是第一次配置并且在跳转路由的时候不会丢掉呢？这里我们可以设置全局状态来管理。

设置全局的方法：

1.设置全局变量挂在Windows下面，因为我们是单页面应用，所以此方法好用，我们切换路由的时候它不会丢的。

2.在localStorage中去存储，但这个它是会永久存储，你关了浏览器也会还在不会丢

3.做状态管理，因为在vue开发中，你想更灵活的去使用这种状态，而且能实现状态的一个响应式的处理的话，用状态管理是最合适的。（因为我们现在每个组件都管理自己的状态，我们给它弄一个能够在全局中共享访问的，跳出三界，不在五行之中的猴子，让它来进行管理就可以了）

我们这里使用第三种方法：

定义一个用pr包装之后的这样一个命名空间为router的一个store，导出了两个 isGetterRouter和changeRouter，之后访问isGetterRouter初始值是false，如果等我们配置好了之后直接调用changeRouter方法，把它值改成true。那自然这个全局的isGetterRouter就变成了true了，这样的话我们再访问的是true我们就不进去了，只有false的时候再进去。