前回までの記事はこちら↓
グローバルビフォーガード
全てのページ遷移前に特定の処理を施すことが可能。
main.jsでimportしたrouter.jsに.beforeEachを使って、実装を行う。
router.beforeEach(() => {
})
.beforeEach には３つの引数を取ることができる。
router.beforeEach((to,from,next) => {
})
to,fromは、現在の$routeの状態を表すルートオブジェクト。
.beforeEachは、最後に必ずnext関数を記載する必要がある。記載しないと、次に進まず真っ白い画面のままになってしまう。
router.beforeEach((to,from,next) => {
next();
})
特定のページ遷移前にナビゲーションガードを加える
特定のページ遷移前にナビゲーションガードをつける場合は、router.jsの各pathにbeforeEnterを使って記載していく。
グローバルでは、beforeEachだったが、今回はbeforeEnterなので注意。
beforeEnter(to,from,next){
next(false);
}
beforeEachと同様に引数を取ることができる。
pathを含んだコードはこちら↓
routes: [
{
path: '/home', components: {
default: Home,
header: HeaderHome
},
beforeEnter(to,from,next){
next(false);
}
}]
コンポーネントにナビゲーションガードを加える
ルートコンポーネントに付けることができる。
※routerに設定されて動かされるコンポーネント
コンポーネントに付けることができるナビゲーションガードは３種類ある。
beforeRouteEnter(to, from, next) {
next();
},
beforeRouteUpdate(to, from, next) {
next();
},
beforeRouteLeave(to, from, next) {
next();
}
beforeRouteEnter…コンポーネントが表示される時に実行される。
beforeRouteUpdate…ルートが変わった時に実行される。※例えば、/home/1から/home/2に変わった時
beforeRouteLeave…コンポーネントのルートから離れた時に実行される。
コンポーネントの読み込みを遅らせる
コンポーネントが膨大になった場合、アクセス時のページ読み込みがかなり遅くなる。（一気にすべてローディングを行うため）
これを回避するために、ローディングの読み込みを遅らせることができる。
コンポーネントの読み込みを行っているwebpackに、必要な時に読み込みがされるように命令をかく。
const Home = () => import("./views/Home.vue");
networkのnameが自動連番されてしまう。命名したい時は、コメントを追記する。
/* webpackChunkName:“Home” */
const Home = () => import(/* webpackChunkName:"Home" */"./views/Home.vue");
Vue CLI3は、prefetchが走るため、responseが暇な時に必要そうなパーツを読み込んで、キャッシュで持っておく仕組みがある。
