Dans vue2vue3, vous savez ce que sont les méta-informations de routage, la configuration des méta-informations de routage. Changez l'itinéraire de saut de page pour remplacer le titre.

1. Résumé en une phrase : informations dans le méta-objet de la configuration du routage (vue2)

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

On peut voir à partir de la châtaigne qu'un méta-objet personnalisé est ajouté à la route, et un statut requirementsAuth est défini sur true dans celui-ci.

C'est pour quoi

La réponse a déjà été donnée par un autre châtaignier officiel ci-dessous.

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()
  }
})

Nous pouvons utiliser le statut défini dans meta pour déterminer si l'authentification de connexion est requise . Si requirementsAuth dans meta est vrai, nous devons déterminer si nous nous sommes connectés ou non, et passer à la page de connexion si nous ne sommes pas connectés. Si connecté, continuer à sauter.

À ce stade, certaines personnes peuvent dire que le chemin, les paramètres et la requête mentionnés ci-dessus peuvent tous stocker des informations en tant que marqueurs d'état pour la vérification de la connexion. En effet, ils peuvent obtenir le même effet. S'il s'agit d'un petit nombre de vérifications individuelles, il est pas un problème pour les utiliser. Mais que se passe-t-il si l'authentification de connexion est requise pour plusieurs routes ? Le chemin, les paramètres et la requête stockent les informations explicitement sur l'URL. Et plusieurs chemins ajoutent les mêmes informations d'état à l'URL. Cela rend l'URL n'est plus simple, et c'est aussi très inélégant et beau . Alors pour véhiculer des informations implicitement et élégamment, utilisez le méta objet !

2. Comment changer de page pour changer de titre ? (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

Les mots de code ne sont pas faciles-szh