In vue2vue3 wissen Sie, was Routing-Metainformationen sind, die Konfiguration von Routing-Metainformationen. Ändern Sie die Seitensprungroute, um den Titel zu ersetzen.

1. Zusammenfassung in einem Satz: Informationen im Meta-Objekt der Routing-Konfiguration (vue2)

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

Aus der Kastanie ist ersichtlich, dass der Route ein benutzerdefiniertes Metaobjekt hinzugefügt wird und darin ein requireAuth-Status auf „true“ gesetzt wird.

wofür ist das

Die Antwort wurde bereits von einer anderen offiziellen Kastanie unten gegeben.

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

Wir können den in Meta gesetzten Status verwenden, um festzustellen, ob eine Anmeldeauthentifizierung erforderlich ist . Wenn requireAuth in Meta wahr ist, müssen wir feststellen, ob wir uns angemeldet haben oder nicht, und zur Anmeldeseite springen, wenn wir nicht angemeldet sind. weiter springen.

An dieser Stelle mögen einige Leute sagen, dass der oben erwähnte Pfad, die Parameter und die Abfrage alle Informationen als Statusmarker für die Anmeldeverifizierung speichern können.Tatsächlich können sie den gleichen Effekt erzielen.Wenn es sich um eine kleine Anzahl individueller Verifizierungen handelt, ist dies der Fall kein Problem, sie zu verwenden. Aber was ist, wenn die Anmeldeauthentifizierung für mehrere Routen erforderlich ist? Pfad, Parameter und Abfragen speichern Informationen explizit in der URL. Und mehrere Pfade fügen der URL dieselben Zustandsinformationen hinzu. Dadurch wird die URL nicht mehr einfach, und es ist auch sehr unelegant und schön Um Informationen implizit und elegant zu übermitteln, verwenden Sie das Meta-Objekt!

2. Wie wechselt man Seiten, um den Titel zu ändern? (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

Codewörter sind nicht einfach-szh