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

Définition de l'itinéraire

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

(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 // 别忘了这句啊，之前忘写了，调了好半天呢
  }
 }
})

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!