路由--导航守卫 （路由过滤器）

引：正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

导航守卫分为三种：全局守卫、独享守卫、组件守卫。

1、全局守卫

在router的index里面通过 router实例对象配置

const router = new VueRouter({
    routes: [{
        path: '/home',
        component: HomeLayout,
        children: [
......
})

/**
 * 全局路由，前置守卫，在路由切换前调用
 *  to:即将要进入的目标 路由对象
 *  from :当前导航正要离开的路由
 *  next：进行管道中的下一个钩子 @TODO 必须调用  如果不调用 就不会发生跳转
 *
 * 可以加一些限制条件  例如：是否已经登录....
 *
 */
router.beforeEach((to, from, next) => {
    console.log(to, from, next,localStorage.getItem("isLogin"))
    if (localStorage.getItem("login")=='ok') {
        //要主动调用
        next()
    } else {
        alert("请先去登录")
    }

});

/**
 * 全局路由，后置守卫，在路由切换后调用
 *  to:即将要进入的目标 路由对象
 *  from :当前导航正要离开的路由
 *
 *  例如：可以做修改 网页 title 名称-->document.title=""
 *
 */
router.afterEach((to, from) => {
    console.log(to, from,)

});

2、独享守卫

在router的index里面通过 router实例里面的路由节点里面配置

const router = new VueRouter({
    routes: [{
        path: '/home',
        component: HomeLayout,
        children: [
            {
                path: 'news',
                component: NewsLayout,
                //独享守卫 
                beforeEnter: (to, from, next) => {
                    console.log(to, from, next)
                    next()
                }
                }
            }, {
         ......

])

3、组件守卫

在组件里面配置

 export default {
        name: "Demo", 

//@TODO 进来这个组件之前调用
        beforeRouteEnter(to, from, next) {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当守卫执行前，组件实例还没被创建
            console.log(to, from, next)
    
            next()
        },
        //@TODO 在这个组件里面 打开子组件时调用
        beforeRouteUpdate(to, from, next) {
            // 在当前路由改变，但是该组件被复用时调用
            // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
            // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
            console.log(to, from, next)
            next()
        },
        //@TODO 离开这个组件之前调用
        beforeRouteLeave(to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            console.log(to, from, next)
            next()
        }
}

路由元信息(meta)

配置：

const router = new VueRouter({
    routes: [{
        path: '/home',
        component: HomeLayout,
        meta: {
            title: "主页"
        },
        children: [
              ......
   
   })

使用：

/**
 * 全局路由，后置守卫，在路由切换后调用
 *  to:即将要进入的目标 路由对象
 *  from :当前导航正要离开的路由
 *
 *  例如：可以做修改 网页 title 名称-->document.title=""
 *
 */
router.afterEach((to, from) => {
    console.log(to, from,)

   document.title = to.meta.title

});

Vue 导航守卫官网地址https://v3.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB