Vue-router切换不同参数的共用路由问题？

Question

parent.vue

//html
<button @click='alter(1)'>btn1</button>
<button @click='alter(2)'>btn2</button>
<router-view></router-view>

//js
alter(item) {
    this.$router.push({name:'classifyEdit',params:{id:item}});
}

child.vue

beforeRouteUpdate(to,from,next){
    console.log(to.params.id);
    next();
}

为什么只能显示一个按钮的id呢？如何才能点击不同的按钮显示相应的id

已经解决，现在贴一下代码
获取不到参数的原因就是第一次路由渲染之后已经存到了缓存里，第二次就不会触发组件的生命周期钩子，因此获取不到第二个参数，解决方法主要有监听路由参数，使用路由导航守卫beforeRouteUpdate，我用的后者，以下是代码：

parent.vue

<button @click='alter(1)'>btn1</button>
<button @click='alter(2)'>btn2</button>
<Modal
    v-model="moralFlag"
    :title="moralTitle">
    <router-view></router-view>
    <div slot="footer"></div>
</Modal>

alter(item) {
    this.$router.push({name:'classifyEdit',query:{id:item.row.id}});
}

child.vue

beforeRouteUpdate(to,from,next){
    this.getData(to.query.id);
    next();
},
created(){
    this.getData(this.$route.query.id);
},
 methods: {
    getData(id){
        console.log(id)
}

两个钩子搭配使用
PS：制作过程中发现beforeRouteUpdate只能监听query参数无法监听params.

Answer 1

你是在哪里console.log(this.$route.params.id)的. 点击两个按钮, 点第一次的时候, router-view 刚创建, created可以调用, 获取到id, 点第二次的时候, 就应该是beforeRouteUpdate的钩子函数了.
你再加一个

        beforeRouteUpdate(to, from, next){
            console.log(to.params.id);
            next();
        }

<router-view></router-iview> 多了一个 i, 请注意

Answer 2

对于你这个问题我是这样理解的
首先 我们点击btn1按钮，那么显然会调用路由进入了classifyEdit 组件。所以传入了id参数

但是如果我们这个时候再次点击btn2的时候，其实我们已经在name为classifyEdit的页面了，router其实并没有再次传递参数，或者跳转 因为name是相同的。所以你不管怎么点击btn2 其实都是无效的。
是我浅薄了,对vue-router的理解不够深入，重新翻看了 vue-router文档
这里有介绍
介意楼主 看下vue-router

Answer 3

建议改一下路由配置，不要把id做为参数传入，比如：

{
    path: '/classifyEdit/:id',
    name: 'classifyEdit',
    component: classifyEdit,
    props: true
}

点击的时候：

alert (id) {
    this.$router.push(`/classifyEdit/${id}`)
}

在子组件：

props: ['id'],
watch: {
  id (v) {
    console.log(v)
  }
}

这样应该就能每次取得值了