vue2.0 从一个页面向另一个页面跳转并传参,如何实现传参后把数据更新到页面上?

比如我现在在页面A跳转到页面B,A中的router-link :to={path:’B’,params:{id:’5’}}

clipboard.png

clipboard.png

求助:在页面B中的mounted生命周期函数中使用this.$route.params.id,然后通过id的值进行其他操作,但是页面没有新的操作路由或者操作页面的程序,导致数据拿到但是页面没更新,得手动刷新页面才能出现最终要的结果,如何解决?

阅读 21.5k
2 个回答

1.使用wacth去监听路由变化

watch: {
  '$route': xxxx
},

2.使用beforeRouteUpdate 的路由回调钩子

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

详细的看这里教程

'$route'(to, from) {

 执行数据更新对应的方法  比方说
 this.id = this.data_id

}

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题