应用场景

  1. 假如有一个详情页，从图片列表可以跳转过来，从新闻列表也可以跳转过来。
  2. 此时我们想要当商品列表过来时顶部显示“商品详情”文字字样，新闻列表过来类似。
  3. 就可以利用导航守卫给当前组件（详情页组件）添加 beforeRouteEnter 。
  4. 通过该方法的第二个参数from来判断“从哪儿来”
// 路由router
{name: 'news.list', path: '/news/list', component: NewsList},
{name: 'goods.list', path: '/goods/list', component: GoodsList}

// 详情页组件
beforeRouteEnter(to, from, next) {
  let title = '';
  if(from.name === 'news.list') {
    title = '新闻详情';
  } else if (from.name === 'goods.list') {
    title = '商品详情';
  }
  // 一定要调用 next ，否则没有任何效果
  next(vm => {
  	// 通过 vm 访问组件实例
    vm.title = title;
  })
}

更多守卫函数

⭐️ 全局守卫

  1. router.beforeEach(to,from,next) 全局前置守卫 进入路由之前
  2. router.beforeResolve(to,from,next) 全局解析守卫 在beforeRouteEnter调用之后调用
  3. router.afterEach(to,from) 全局后置钩子 进入路由之后【不接受next参数】

路由独享守卫

如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫：

const router = new VueRouter({
  routes: [{path: '/foo', component: Foo,
            beforeEnter: (to, from, next) => { 
              // 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
              // ...
            }
           }]
})

组件内守卫

beforeRouteEnter (to, from, next) {
    在渲染该组件的对应路由被 confirm 前调用
    不！能！获取组件实例 `this`
    因为当钩子执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
  在当前路由改变，但是该组件被复用时调用
  举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
  导航离开该组件的对应路由时调用
  可以访问组件实例 `this`
}

导航解析流程