1. 程式人生 > >Vue 導航守衛用法 動態路由 路由懶載入

Vue 導航守衛用法 動態路由 路由懶載入

<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