Explication détaillée de l'utilisation des métainformations de routage de Vue-router

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des méta-informations de routage de Vue-router. Quelles sont les précautions pour utiliser les méta-informations de routage de Vue-router. Voici des cas pratiques. Un Levez-vous et jetez un œil.

1. Contexte

Dans le passé, lors de l'écriture du front-end, j'utilisais l'interface de retour back-end. Vous n'avez pas à vous soucier de passer à Shenma, mais cette fois, j'ai utilisé vue. Le front-end que j'ai écrit était la première fois que le front-end et le back-end étaient séparés. Le back-end ne fournissait qu'une interface de données au front-end. Au début, je pensais que c'était l'interface de contrôle back-end. a été utilisé pour rendre Shenma, mais après y avoir réfléchi plus tard, le routage et Shenma étaient tous contrôlés par le front-end, je ne pouvais pas atteindre le back-end, alors j'ai continué à errer. Sur le site officiel de vue-router, j'ai pensé qu'il devait y avoir quelque chose en rapport, puis j'ai trouvé les méta-informations de routage. Je n'ai pas compris ce que cela signifiait au début, mais plus tard je l'ai compris et je l'ai enregistré

2. Analyse du code

Méta-informations de routage du site officiel

(1)

Définition de l'itinéraire

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

Le champ méta ici est le champ de méta-informations de routage, et requireAuth est le nom du champ que j'ai créé pour indiquer si ces informations de routage doivent être détectées, vrai Cela signifie qu'il doit être testé, false signifie qu'il n'a pas besoin d'être testé (le nom peut être choisi avec désinvolture, par exemple, mon propre requireId, ou si vous êtes trop paresseux pour y penser, juste a, b A partir de là, bien sûr, il est plus recommandé de donner un nom significatif)

(2) code js

new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App },
 render: h => h(App),
 created () {
  this.redrct()
 },
 methods: {
  redrct () {
   router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresId)) { //这里meta字段的名称要与上面route里面保持一致
     // this route requires Id, check if logged in
     // if not, redirect to login page.
     if (!this.loggedIn()) { // 自己的判断条件
      next({
       path: '/', // 重定向后的路由
       query: { redirect: to.fullPath } // 登录成功之后可以根据query中的内容跳转回原来的路由(页面)
      })
     } else {
      next()
     }
    } else {
     next() // 确保一定要调用 next()
    }
   })
  },
  loggedIn () {
   var id = sessionStorage.getItem('userId')
   if (id === null) { // 未登录
    return false
   }
   return true // 别忘了这句啊，之前忘写了，调了好半天呢
  }
 }
})

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php. Site chinois !

Lecture recommandée :

Comment utiliser la bibliothèque Particles.js dans vue

Explication détaillée de l'utilisation de Three .js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!