vue-全局导航守卫

标签：vue   color   位置   第一个   流程   问题   自定义   next   history   

　　现在有个需求是，路由间进行切换时，顺便把页面的标题也修改了；比如说当前A路由，那标题是A；切换到B路由，那标题变成B，以此类推。

　　很多人的做法是这样的，在每个路由的created()写代码，直接document.title="A"/"B"/"C"不就可以了吗？那这样是不是太麻烦了，每个路由都要去加这么个代码。（顺便在普及下：created是组件刚被创建后可以回调的方法，mounted是组件的template挂载到DOM上面后回调的方法，updated是当template模板中内容发生改变时会调用的函数）

　　因此全局导航守卫能够帮助我们解决上面的问题，只要路由发生的跳转了，守卫就箭头到，并执行相应的处理，要实现这个守卫，只需要在route/index.js重写router的一个方法即可，如下：

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
//是这个方法；在路由跳转前，会调用该方法
router.beforeEach((to,from,next) => { //to是跳转后的路由对象，from跳转前的路由对象，next是执行下一个方法，记住next一定要写，不写的话整个流程跑不通了，我们的代码在next()之前
  document.title = to.matched[0].meta.title
  next()
})

　　可能很萌B的是调 to路由对象的matched[0].meta.title是什么东西啊？首先每个路由呢是可以自定义数据的，通过一个meta属性来定义，你就可以理解成通过meta属性来自定义路由的某些数据，如下：

const routes = [
  {
    path: ‘/‘,
    name: ‘portal‘,
    redirect: ‘/home‘,
    meta: {
      title: ‘protal‘
    }
  }
]

　　上面的我就搞了元数据title，方便其他比如路由跳转时可获取，但大家很纳闷，直接to.meta.title不就可以了嘛？搞个matched[0]是什么东西？

　　首先 to.meta.title也是可以的没毛病，但如果是 to路由是子路由，子路由里没有定义meta，而他的父路由有meta，这时候是不是就拿不到数据啦？这么说吧，to.matched是拿到一个数组，这个数组里包含父路由对象以及子路由对象，而父路由对象是被放在第一个位置，即 [0]，这样的话，不管to是不是父、子路由，通通取 父路由的meta

vue-全局导航守卫

标签：vue   color   位置   第一个   流程   问题   自定义   next   history   

原文地址：https://www.cnblogs.com/ibcdwx/p/14607140.html