vue2vue3中你知道什么是路由元信息，路由元信息配置。切换页面跳转路由更换title。

1、一句话概括:路由配置的meta对象里的信息（vue2）

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

从栗子可以看出就是给路由添加了一个自定义的meta对象,并在里面设置了一个requiresAuth状态为true.

它有什么用

从下面的另一个官方栗子里已经给出了答案.

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    //对matched不了解的建议看官方api文档,或我7.1节的说明
    //数组some方法,如果meta.requiresAuth为ture,则返回true.此时,说明进入该路由前需要判断用户是否已经登录 
    if (!auth.loggedIn()) {   //如果没登录,则跳转到登录页
      next({
        path: '/login',
        query: { redirect: to.fullPath }  //官方例子的这个小细节很好,通过query将要跳转的路由路径保存下来,待完成登录后,就可以直接获取该路径,直接跳转到登录前要去的路由
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

我们可以通过在meta里设置的状态,来判断是否需要进行登录验证.如果meta里的requiresAuth为true,则需要判断是否已经登录,没登录就跳转到登录页.如果已登录则继续跳转.

此时,有人可能会说,前面说的path,params,query都可以存储信息,作为登录验证的状态标记.的确,它们也可以达到同样的效果.如果是少量单个的验证,使用它们问题不大. 但如果是多个路由都需要进行登录验证呢?path,params,query是把信息显性地存储在url上的.并且多个路径都把一个相同的状态信息加在url上.这样就使url不再单纯,并且也很不优雅美观. 所以要优雅要隐性地传递信息,就使用meta对象吧!

2、怎么切换页面换title呢？（vue3）

import {
  createRouter,
  createWebHashHistory
} from 'vue-router'

import homeModel from '../views/homeModel/route'
const routes = [
  {
    path: '/myOrder',
    name: 'myOrder',
    component: () => import('../components/order/myOrder.vue'),
    meta: {
      title: '我的订单',
      intercept: true,
    }
  },
  {
    path: '/myRoll',
    name: 'myRoll',
    component: () => import('../components/roll/myRoll.vue'),
    meta: {
      title: '我的礼券',
      intercept: true,
    }
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

router.beforeEach((to, go) => {
  // 从本地存储中取出token
  let token = localStorage.getItem('token')
  if (token && token != 'null') { // 证明有用户  
    return true //本地存储有token 用户可以进入页面
  } else {
    if (to.meta.intercept) { // to.meta.intercept  为true 说名要拦截这个页面
      return {
        path: '/login',
        // query: {
        //   ...to.query
        // }
      } // return相当于vue2 的next
    } else { // 否则就可以进去这个页面
      return true
    }

  }
})


// 切换页面换title 全局的前置守卫
router.afterEach((to, next) => {
  //获取 document.querySelector title = 直接改掉 这么简单
  document.querySelector('title').innerText = to.meta.title
})

export default router

码字不易-s-z-h