Vue知识点总结

响应路由参数的变化

当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。
复用组件时,想对路由参数的变化作出响应的话:
(1). watch(监测变化) $route 对象:

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

(2).beforeRouteUpdate 导航守卫
如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate来响应这个变化 (比如抓取用户信息)。

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、生命周期 1.1 生命周期总共有八个 beforeCreate、created、beforeMount、mou...
    一颗好困芽3阅读 420评论 0 0
  • v-show 与 v-if 区别 动态绑定class的方法 计算属性和 watch 的区别 怎样理解单向数据流 k...
    Jeff_Kitty阅读 459评论 0 0
  • 目录 - 1.vue-router响应 路由参数 的变化 - 2.vue-router如何定义嵌套路由? - 3....
    我跟你蒋阅读 5,672评论 0 14
  • v-once:只执行一次 v-html:用来展示带标签的字符串 v-text:会覆盖已存在的文本 v-pre:不显...
    温柔vs先生阅读 271评论 0 0
  • s1、Vue是一套用于构建用户界面的渐进式框架,可以为复杂的单页面应用提供驱动;它支持组件化,也就是可以将页面封装...
    解忧杂货铺_bba2阅读 281评论 0 0