ルーターガードとは何ですか？
ルーティングガードは、ログイン認証（ログインがパーソナルセンターページに入ることができない）などのルーティングジャンプの検証です。
ルートガードは3つのカテゴリに分類されます。
-
グローバルガード：
beforeEach -
ルーティング専用のガード：
beforeEnter -
アセンブリ内のガード：
beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
各ガードメソッドは、次の3つのパラメータを受け取ります。
to：入る目的地ルート（行き先）from：出発ルート（どこから来たのか）next：次のステップに進むかどうか（続行しますか）
次の関数の特定の使用法：
グローバルガード
1.VUEルーティングオブジェクトをルーティングjsファイルにインポートしてマウントします
import Router from 'vue-router'
Vue.use(Router)
2.ルーティングインスタンスを作成します
保護する必要のあるルートに追加します：meta：{permission：true}、
const router = new Router({
routes: [
{
path: '/', redirect: '/login' },
{
path: '/login', component: Login },
{
path: '/home', component: Home,meta: {
permission: true }}
]
})
3.ルーティングガードとナビゲーションガードを取り付けます
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
if (to.meta.permission) {
if (sessionStorage.getItem("token")) {
next();
} else {
alert("请先登录");
next("/login");
}
} else {
next();
}
});
4.ルーティングのエクスポート
export default router
シングルルーターガード
これは、ルーティング構成beforeEnterガードで直接行うことができます。
const router = new Router({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
if (sessionStorage.getItem("token")) {
next();
} else {
alert("请先登录");
next("/login");
}
}
}
]
})
これらのガードには、グローバルフロントガードと同じメソッドパラメータがあります。
コンポーネント内部ガード
コンポーネント内で使用され、データ、作成、マウント、およびメソッドと同じです
例としてbeforeRouteEnterを使用します。
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
if (sessionStorage.getItem("token")) {
next();
} else {
alert("请先登录");
next("/login");
}
},