Detaillierte Erläuterung der Verwendung von Routing-Metainformationen des Vue-Routers

Dieses Mal werde ich Ihnen die Verwendung der Routing-Metainformationen des Vue-Routers ausführlich erläutern. Welche Vorsichtsmaßnahmen gibt es für die Verwendung der Routing-Metainformationen des Vue-Routers? Hier sind praktische Fälle. Stehen Sie auf und schauen Sie sich um.

1. Hintergrund

In der Vergangenheit habe ich beim Schreiben des Front-Ends die Back-End-Rückgabeschnittstelle verwendet. Sie müssen sich keine Sorgen machen, zu Shenma zu springen. Aber dieses Mal habe ich Vue verwendet. Das Front-End, das ich geschrieben habe, war das erste Mal, dass das Front-End und das Back-End getrennt waren. Zuerst dachte ich, es sei die Back-End-Steuerungsschnittstelle wurde zum Rendern von Shenma verwendet, aber nachdem ich später darüber nachgedacht hatte, wurden das Routing und Shenma alle vom Front-End gesteuert, ich konnte das Back-End nicht erreichen, also wanderte ich weiter herum. Auf der offiziellen Website von vue-router dachte ich, dass es etwas Ähnliches geben sollte, und dann fand ich die Routing-Metainformationen. Ich verstand zunächst nicht, was sie bedeuteten, aber später fand ich es heraus und zeichnete es auf

2. Code-Analyse

Offizielle Website-Routing-Metainformationen

(1)Routendefinition

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

Das Metafeld hier ist das Routing-Meta-Informationsfeld, und requireAuth ist der Feldname, den ich erstellt habe, um zu markieren, ob diese Routing-Informationen erkannt werden müssen, wahr Es bedeutet, dass es getestet werden muss, und false bedeutet, dass es nicht getestet werden muss (der Name kann beiläufig gewählt werden, z. B. meine eigene requireId, oder wenn Sie zu faul sind, darüber nachzudenken, einfach a, b). Davon ausgehend empfiehlt es sich natürlich weiterhin, einen aussagekräftigen Namen zu vergeben)

(2) js-Code

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

So verwenden Sie die Particles.js-Bibliothek in Vue

Detaillierte Erklärung der Verwendung von Three .js

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Routing-Metainformationen des Vue-Routers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!