Write the Code. Change the World.

12月 03

某些时候,在一些全局的场景中。我们可能会对某个特殊路由进行处理。这个时候,路由的变化就很有用了。来变变变。

  • 方式一
// 监听,当路由发生变化的时候执行
watch:{
  $route(to,from){
    console.log(to.path);
  }
}
  • 依旧方式一
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},


– 还是方式一

// 监听,当路由发生变化的时候执行
watch: {
  '$route':'routeChange'
},
methods: {
  routeChange(){
    console.log(this.$route.path);
  }
}

上边的侦听,是路由从 A 到 B 才有效。如果 A 到 A (比如刷新网页) 这样就没效了。怎么破呢。这样破。

<router-view :key="key"></router-view>

computed: {
  key() {
    return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
  }
}

这样,即使是同一个路由。侦听一样 watch 的到。

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

不仅在 vue 文件中可以使用上边的方式,在纯 js 中也是可以的。

import router from './router'

router.beforeEach(async(to, from, next) => {
    next();
})

这种全局的侦听还是很有用的。比如 NProgress 进度条的使用。页面切换动画的使用等。

文章来源

https://www.cnblogs.com/crazycode2/p/8727410.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注