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

Question

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

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

Answer 1

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`
  }
}

详细的看这里教程

Answer 2

'$route'(to, from) {

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

}