zoukankan      html  css  js  c++  java
  • vue-全局导航守卫

      现在有个需求是,路由间进行切换时,顺便把页面的标题也修改了;比如说当前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

      刚才的beforeEach,是被叫做全局的前置导航守卫,还有一个是afterEach,是后置的全局守卫,当路由跳转完毕后会执行的方法。

    router.afterEach( (to,from) => {
      
    })

      除了全局守卫,还有路由独享守卫和 组件守卫,可以查看vue的官网来学习。

  • 相关阅读:
    Educational Codeforces Round 67 D. Subarray Sorting
    2019 Multi-University Training Contest 5
    Educational Codeforces Round 69 (Rated for Div. 2) E. Culture Code
    Educational Codeforces Round 69 D. Yet Another Subarray Problem
    2019牛客暑期多校训练第六场
    Educational Codeforces Round 68 E. Count The Rectangles
    2019牛客多校第五场题解
    2019 Multi-University Training Contest 3
    2019 Multi-University Training Contest 2
    [模板] 三维偏序
  • 原文地址:https://www.cnblogs.com/ibcdwx/p/14607140.html
Copyright © 2011-2022 走看看