Vue2/vue3 ルーティング権限管理方法の例

'vue-router' から VueRouter をインポートします。
Vue.use(VueRouter)
...
ルート: [
  {
    パス: '/login',
    名前: 'ログイン',
    メタ: {
      役割: ['管理者', 'ユーザー']
    },
    コンポーネント: () => import('../components/Login.vue')
  },
  {
    パス: 'ホーム',
    名前: 'ホーム',
    メタ: {
      役割: ['管理者']
    },
    コンポーネント: () => import('../views/Home.vue')
  },
]

const ルーター = 新しい VueRouter({
  ルート
})

デフォルトルーターをエクスポートする

//管理者とユーザーの2つの役割があると仮定します 
//バックグラウンドから取得したユーザーロール const role = 'user'
//ページに入ると、ナビゲーションガード router.beforeEach イベントがトリガーされます router.beforeEach((to,from,next)=>{
  to.meta.roles.includes(role) の場合 {
   next() //リリース}esle{
   next({path:"/404"}) //404ページにジャンプ}
})

'./router' からルーターをインポートします
router.beforeEach((to, from, next) => {
   // ...
    一致する長さが 0 の場合
        次へ('/404')
    } それ以外 {
        次（）
    }
    //console.log(to、from、next、'ルートガード')
})

'vue-router' から createRouter、createWebHashHistory をインポートします。
...
ルート: [
  {
    パス: '/login',
    名前: 'ログイン',
    メタ: {
      役割: ['管理者', 'ユーザー']
    },
    コンポーネント: () => import('../components/Login.vue')
  },
  {
    パス: 'ホーム',
    名前: 'ホーム',
    メタ: {
      役割: ['管理者']
    },
    コンポーネント: () => import('../views/Home.vue')
  },
]
const ルーター = createRouter({
    履歴: createWebHashHistory(),
    ルート: ルーター
})
デフォルトルーターをエクスポートします。

輸入 {
    ルーターを使用する
} 'vue-router' から;
エクスポートデフォルト{
    名前: 'アプリ'、
    設定（） {
        定数ルーター = useRouter();
        router.beforeEach((to, from, next) => {
            // ...
            一致する長さが 0 の場合
                次へ('/404')
            } それ以外 {
                次（）
            }
        })
    }
}