この記事では、面接で聞かれなければならないこと、つまり Vue-Router のナビゲーション フックについて説明します。お役に立てば幸いです。
「ナビゲーション」はルートが変更されていることを示します。
vue-router
提供されているナビゲーション ガードは、主にジャンプやキャンセルによってナビゲーションをガードするために使用されます。ルート ナビゲーション プロセスを組み込む機会は複数あります。グローバル、単一ルート専用、またはコンポーネント レベルです。 [関連する推奨事項: 「vue.js チュートリアル 」]
##router.beforeEach グローバル フロント ガードの登録:
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // to:要去哪个页面 // from:从哪里来 // next:它是一个函数。 // 如果直接放行 next() // 如果要跳到其它页 next(其它页) })
router.beforeEach(async(to, from, next) => { NProgress.start() // 开启进度条 const token = store.state.user.token const userId = store.state.user.userInfo.userId console.log(token, to.path, from.path) if (token) { if (to.path === '/login') { // 有 token还要去login next('/') NProgress.done() // 关闭进度条 } else { // 有 token,去其他页面,放行 if (!userId) { await store.dispatch('user/getUserInfo') } next() } } else { if (to.path === '/login') { // 没有token,去login,放行 next() } else { next('/login') // 没有token,去其他页面 NProgress.done() } } })
router.afterEach グローバル ポストフックを登録します:
next# を受け入れません。 ## この関数はナビゲーション自体を変更しません: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">router.afterEach((to, from) => {
// ...
})</pre><div class="contentsignin">ログイン後にコピー</div></div>
router.beforeEach と似ていますが、違いは、ナビゲーションが確認される前に
ガードがすべてのコンポーネントに同時に存在し、非同期ルーティング コンポーネントが解析された後 であることです。パーシングガードが呼び出されます。
4. ルート専用ガード
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })
5. コンポーネント内のガード (2.2 の新機能)
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` } }
ガードを呼び出します。
グローバル beforeEach
ガードを呼び出します。
再利用されたコンポーネントで beforeRouteUpdate
ガード (2.2) を呼び出します。
ルーティング設定で beforeEnter
を呼び出します。
非同期ルーティング コンポーネントを解決します。
を呼び出します。
グローバル beforeResolve
ガード (2.5) を呼び出します。
next
に渡されたコールバック関数を呼び出すと、作成されたコンポーネント インスタンスがパラメータとして渡されます。コールバック関数。プログラミング関連の知識について詳しくは、
プログラミング入門をご覧ください。 !
以上がVue-Router のナビゲーション フックの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。