Vue.js进阶系列(37)--全局导航守卫

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


image.png

1.什么是导航守卫?

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

image.png

  我们都知道HTML中有上图这么一个标题。小编的需求是当用户点击“首页”,标题就变成“首页”;当用户点击“关于”,标题就变成“关于”。目前有两种实现的办法,下面我们分别来看看这两种办法是如何实现的。

① 生命函数

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

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

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

切换标题.gif

  但是该方法不足的地方就是:太繁琐啦!我只是想根据导航栏然后修改标题,你就在四个页面都添加了 created 函数 Ծ‸Ծ 如果有一百个页面你也这么修改的话,小编不会拦着你的,毕竟你十分的“勤奋” ,像小编这么“懒”的人肯定不会用这个方法的,不信你看下面就知道了 o( ̄︶ ̄)o

image.png

2.导航守卫使用

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

① 使用 beforeEach 确定跳转变化

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

源码.png

NavigationGuard(⊙_⊙)? 是啥?不懂,接下来我们再进一步看看 NavigationGuard是什么东西
image.png

  可以看到 NavigationGuard 是一个名字叫做 any 的箭头函数,箭头函数内部传入了三个参数:to、from、next。to代表路由即将要跳转的地方,from代表从那个地方跳转,next 代表下一步。
  简单的说,from是从哪里来,to是要到哪里去,next是下一步要怎么走。是不是通俗易懂了好多嘞~
因此根据上面的知识,我们的代码可以编写成如下:

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

  好啦,我知道出现bug了 o(╥﹏╥)o 因为首页的标题显示的是“undefined”o(╥﹏╥)o 这到底为啥呢......呜呜呜┭┮﹏┭┮
  后来小编知道了,因为在首页中有路由的嵌套。嵌套是啥?忘记了(⊙_⊙)?就是URL后面还有该页面想参数,看下图:
嵌套的路由.png

没有嵌套的路由.png

于是乎小编打印了一下 to 是个啥玩意儿,不打不知道,一打下一跳:
image.png

  发现 meta 并没有任何东西,但是在matched 中的 meta 却有,说明我们获取title的时候不应该用 to.title 而应该用 to.matched[0].mate.title 。所以结合上面两步给出的完整代码应该是这样子的:

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
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容