ルートガード
分類：
グローバルガード
シングルルートガード
コンポーネント内部ガード
1.グローバルガード
グローバルフロントガードbeforeEach
シーン:
用户页面是否跳转到登录界面，是否有权限跳转到某个页面
意味：
beforeEach()グローバル プレガード: 初期化時および各ルーティング スイッチの前に実行されます。
3 つのパラメーター:
to: ジャンプ先のターゲットルート
from: 現在どのルートからジャンプするか
次へ: ブロッキングを行わず、直接移動し、リダイレクトする必要があるルートにジャンプします
route is meta には特別に用意された設定項目があり、meta 項目に独自の属性や値を設定し、ガード内の権限を判断することができます
//前置路由
import {
userStore } from '../store/userInfo';
router.beforeEach((to, from, next) => {
const store = userStore();
//判断是否有权限返回登录界面
if (from.meta.isAuth) {
if (store.userInfo.token) {
next()
} else {
next("/login")
}
} else {
console.log("没有权限");
next()
}
})
グローバル解析ガードbeforeResolve
ユーザーがページにアクセスできない (あまり使用されていない) 場合に、データをフェッチしたり、回避したいその他のアクションを実行したりするのに理想的な場所
グローバル後衛afterEach
分析、ページ タイトルの変更、ページのクレームなどに役立ちます。
//后置路由
router.afterEach((to, from) => {
console.log("全局后置路由守卫");
//设置跳转路由后页面的标题
document.title = to.meta.title as string
})
2. 単一のルート ガード
専用ガードbeforeEnter
Exclusive **ルートに入るときにのみ発火**別のルートからナビゲートするときにのみ発火
アクセス許可を設定する必要があるルーティング構成に直接コードを記述します. コード ロジックはグローバルな事前ルーティングとまったく同じであり、直接コピーできます.
.....
, {
name: 'order',
path: 'order',
meta: {
isAuth: true, title: '订单管理' },
component: () => import("../components/page/Order.vue"),
//独享守卫
beforeEnter: (to: any, from: any, next: any) => {
console.log("路由独享守卫beforeEnter");
next()
}
}
3. コンポーネントの内部ガード
onBeforeRouteUpdateそれぞれと を介してonBeforeRouteLeave更新を追加し、ガードを残すことができます
beforeRouteEnter
beforeRouteEnter(to, from) {
// 通过路由规则，进入该组件时被调用
// 在渲染该组件的对应路由被验证前调用
// 不能获取组件实例 `this` ！
// 因为当守卫执行时，组件实例还没被创建！
},
beforeRouteUpdate
beforeRouteUpdate(to, from) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
},
beforeRouteLeave
beforeRouteLeave(to, from) {
// 通过路由规则，离开该组件时被调用
// 在导航离开渲染该组件的对应路由时调用
// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
},
ルーター公式サイトの個人的理解度
以上～