Vue-routerのルーティングメタ情報の使い方を詳しく解説

今回は、Vue-router の routing メタ情報の使用方法と、Vue-router のルーティング メタ情報を使用する際の 注意事項 について詳しく説明します。以下は実際のケースです。見てみましょう。

1. 背景

以前はフロントエンドを作成するときにバックエンドのリターン インターフェイスを使用していましたが、今回は Shenma にジャンプすることを心配する必要はありません。 私が書いたフロントエンドは、フロントエンドとバックエンドを初めて分離したもので、バックエンドはフロントエンドにデータ インターフェイスを提供するだけだと思っていました。を使ってシェンマをレンダリングしたのですが、後から考えてみるとルーティングもシェンマもすべてフロントエンドで制御していてバックエンドまでたどり着けず、ずっとうろうろしていました。 vue-router の公式サイトに何か関係があるはずと思っていたら、ルーティングメタ情報を発見しました。最初は意味が分かりませんでしたが、後で理解して記録しました

。

2. コード分析

公式ウェブサイトのルーティングメタ情報

(1)

ルート定義

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

ここのメタ フィールドはルーティング メタ情報フィールドで、requiresAuth はこのルーティング情報を検出する必要があるかどうかをマークするために作成したフィールド名です。true これはテストする必要があることを意味し、 false はテストする必要がないことを意味します (名前は、たとえば自分の requireId など、気軽に選択できます。考えるのが面倒な場合は、a、b だけでも構いません) もちろんここからは意味のある名前を付けることをお勧めします)

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

vue で Particles.js ライブラリを使用する方法

Three.js の詳細な説明

以上がVue-routerのルーティングメタ情報の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。