1.通过watch

        1.1.返回 “从哪里来” 和 “哪里去” 的路由信息

watch:{
	$route(to,from){
	  console.log(from.path) // 从哪来
	  console.log(to.path) // 到哪去
	}
}

        1.2. 返回 “新” “老” 路由信息

watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},

2.通过钩子函数 beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

 // 监听,当路由发生变化的时候执行
    beforeRouteEnter (to, from, next) {
     // 需要注意这里不能使用this,
     // 因为我们使用的是进入路由之前,那会组件还没创建,
          next(()=>{
               // 所有我们只能使用过vm异步语句来让节点上树;
          })
    },
    beforeRouteUpdate (to, from, next) {
      // 在当前路由改变,但是该组件被复用时调用
      // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
      // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    }

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐