好了，告诉大家一个好消息，十分负责任的小编满血复活了~哈哈哈，因为睡了一个好觉。那么下面让我们一起看看今天的进阶系列吧ヽ(￣ω￣(￣ω￣〃)ゝ

image.png

1.什么是导航守卫？

  我们日常生活中的导航相信大家都用过吧O(∩_∩)O哈哈~。就是有指导你从A地到B地的路线。
  而导航守卫也是同样的道理。主要是监听路由跳转的过程。如果不太明白小编提出一个需求。比如：

image.png

① 生命函数

  目前我们常用的生命函数主要有三大类，分别是：created、mounted、updated。
created：是在组件被创建的时候会回调的函数，然后执行该函数内的内容；
mounted：当组件的模板被挂载到DOM上时就会回调该函数，执行函数内相关的操作；
updated：只要页面发生刷新的时候就会回调该函数从而执行函数内的代码块。
对于上面的需求，可以使用 created 函数来实现。具体代码见下：

<script>
    export default {
        name:'home',
        created(){
            document.title="首页"
        }
    }
</script>

  在 home.vue 页面中添加 created 函数，当组件 home 创建的时候就将标题修改成 “首页”。其余的 “用户” 页面、“关于”页面、“档案”页面也是以此类推，小编就不一一展示出来啦，下面让我们一起来看看效果：

切换标题.gif

image.png

2.导航守卫使用

  在文章的开头小编就说过，导航守卫就是监听路由的跳转。所以使用的使用分成以下两步：
第一：使用 beforeEach 确定跳转变化
第二：使用 meta 确定路由跳转变化时要修改的内容
下面小编就告诉大家导航守卫究竟怎么个导航发 (✿◡‿◡)

① 使用 beforeEach 确定跳转变化

  首先在 router 中有个叫 beforeEach 的函数，当我们查看源码时会发现它需要传入一个叫 guard 的 NavigationGuard 参数

源码.png

image.png

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

这里，将 beforeEach 的参数写成箭头函数的形式，接下来就是添加函数内部的代码。
  传入的参数肯定是要用起来的，就像别人给你的零食要尽早吃，否则就过期来一样。所以我们要在箭头函数中使用 上面传入的参数，具体如下：

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

  next()参数一定要记得调用，很简单的道理，如果你不知道下一步，那你怎么继续走下去呢 (`へ´*)ノ 紧接着是to。回顾上面的小编提出的需求，我们要根据跳转到的页面修改标题，所以通过 to.title 来获取要跳转的页面的标题，将标题赋值给document.title。
  上面呢，就是使用 beforeEach 确定跳转变化的具体代码。但是我们还有个地方不知道具体的数值，你猜是谁？没错，我听到了，就是 to.title O(∩_∩)O这就是小编要讲的第二个步骤。

② 使用 meta 确定跳转变化的内容

其实meta 很简单，就在路由的配置中添加上下面的代码就可以了，你看：

{
            path:'/profile',
            component:Profile,
            meta:{
                title:'档案'
            }
        }

  小编在配置“档案”页面的路由中添加了meta，当用户点击 “档案”跳转到档案页面时，该页面的标题就会变成“档案”。于是乎，小编一口气在“首页”、“关于”、“用户”页面的路由配置中都添加了meta属性，接下来让我们一起看看效果吧~

导航守卫.gif

嵌套的路由.png

没有嵌套的路由.png

image.png

const router = new VueRouter({
    routes:[
        {
            path:"",
            redirect:'/home'
        },
        {
            path:'/home',
            component:Home,
//使用 meta 确定路由跳转时要修改的值
            meta:{
                title:'首页'
            },
            children:[
                {
                    path:"",
                    redirect:"new"
                },
                {
                    path:"new",
                    component:HomeNews,
                },
                {
                    path:"message",
                    component:HomeMessage,
                }
            ]
        },
        {
            path:'/about',
            component:About,
            meta:{
                title:'关于'
            }
        },
        {
            path:'/user/:userID',
            component:User,
            meta:{
                title:'用户'
            }
        },
        {
            path:'/profile',
            component:Profile,
            meta:{
                title:'档案'
            }
        }
        
    ],
})
//使用 beforeEach 函数确定转换
router.beforeEach((to,from,next) =>{
    document.title=to.matched[0].meta.title
    console.log(to)
    next()
})

终结版导航守卫.gif

(＾－＾)V成功啦！好啦，今天负责任的小编要下线啦~
❤记得给小编就点赞ho哈哈哈❤

image.png