Vue 導航守衛用法 動態路由 路由懶載入
阿新 • • 發佈:2018-11-28
<template> <div> 這是商品列表頁面 <p> <span>{{$route.params.goodsId}}</span> <span>{{$route.params.name}}</span> </p> </div> </template> <script> export default { name: 'GoodsList', beforeRouteEnter (to, from, next) { // 在渲染該元件的對應路由被 confirm 前呼叫 // 不!能!獲取元件例項 `this` // 因為當守衛執行前,元件例項還沒被建立 next(vm => { // 通過 `vm` 訪問元件例項 }) }, beforeRouteUpdate (to, from, next) { // 在當前路由改變,但是該元件被複用時呼叫 // 舉例來說,對於一個帶有動態引數的路徑 /foo/:id,在 /foo/1 和 /foo/2 之間跳轉的時候, // 由於會渲染同樣的 Foo 元件,因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。 // 可以訪問元件例項 `this` this.name = to.params.name next() }, beforeRouteLeave (to, from, next) { // 導航離開該元件的對應路由時呼叫 // 可以訪問元件例項 `this` const answer = window.confirm('Do you really want to leave? you have unsaved changes!') if (answer) { next() } else { next(false) } } } </script> <style scoped> </style>
import Vue from 'vue' import Router from 'vue-router' const GoodsList = () => import(/* webpackChunkName: "group-main" */'@/views/GoodsList') Vue.use(Router) const routes = [ { path: '/goods/:goodsId/user/:name', name: 'GoodsList', component: GoodsList, beforeEnter: (to, from, next) => { next() } } ] let router = new Router({ routes: routes }) router.beforeEach((from, to, next) => { // console.log(from) // console.log(to) next() }) router.afterEach((from, to) => { // console.log(from) // console.log(to) }) export default router