vue之导航守卫的使用

因为在vue里面我们只有一个index.html。所以不论我们怎么跳转,他的标题都是不变的,但其实在实际项目中,我们是需要随着组件的跳转,标题也是要发生变化的,那我们该如何进行操作呢。
第一种方法就是使用我们的created函数,但是此方法有一个弊端,就是一旦我们的项目过多的话,修改起来非常麻烦,我们总不可能一个一个组件的进行修改吧,所以我们还有第二个方法。
在这里插入图片描述
第二种方法就是使用我们的前置守卫,首先我们要在我们的路由配置里面加上我们的meta,来放置我们要修改的标题
在这里插入图片描述
然后我们在使用我们的前置守卫对每个标题进行修改
在这里插入图片描述
至于为什么要在我们的meta前面加个matched[0],是因为在我的首页这里,我写了子路由,所以他的路由是这样子的
在这里插入图片描述
路由是/home/news。那这就不是我洗的home里面的meta了,这时候我们可以看一下to里面的内容:
在这里插入图片描述
是这样的,然后大家可以看到它里面有个matched,里面的内容是这样子的:
在这里插入图片描述
所以如果我们想要获取到正确的路由,就要得到matched数组里面的第一个内容。所以我们最终的写法就是这样子的:document.title = to.matched[0].meta.title; 。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章