記事のディレクトリ
1.ナビゲーションガード
「ナビゲーション」とは、ルーティングが変更されていることを意味します。vue-routerが提供するナビゲーションガードは、主にジャンプまたはキャンセルによってナビゲーションをガードするために使用されます。
ナビゲーションガードには次の3つのタイプがあります。
- グローバルナビゲーションガード
- 専用ルーティングガード
- コンポーネントのガード
2.グローバルナビゲーションガード
1.グローバルフロントガード
router.beforeEachグローバルフロントガードの登録に使用できます
const router = new VueRouter({
... })
router.beforeEach((to, from, next) => {
// ...
})
ガードメソッドは、次の3つのパラメータを受け取ります。
-
to：Route、入力するターゲットのルートオブジェクト -
from：ルート、現在のナビゲーションが離れようとしているルートオブジェクト -
next：関数、このメソッドを呼び出した後、次のフックを入力できます。次のパラメータはより多くの使用法があります、あなたはナビゲーションガードを入力することができます| Vueルーター公式ウェブサイト詳細調査
ユースケース、beforeEachを使用してページタイトルの変更を完了することができます
const router = new VueRouter({
... })
router.beforeEach((to, from, next) => {
//从 from 跳转到 to
// document.title = to.meta.title;
document.title = to.matched[0].meta.title; //如果有嵌套路由，需要使用这种方式获取 meta中的数据
next();
})
2.グローバルリアガード
//没有 next 参数
router.afterEach((to, from) => {
// ...
})
3、ルーティング専用ガード
これは、ルーティング構成で直接定義されたガードです。
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
第四に、コンポーネントのガード
次のルーティングナビゲーションガードは、ルーティングコンポーネントで直接定義できます。
- beforeRouteEnter
- beforeRouteUpdate（2.2新增）
- beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}