vue-router切换传参不变

Question

vue路由切换的时候获取的this.$route.params.id不变，
需要点分类然后再点电脑，手机才可以变，如图

点击分类--手机

点击电脑，地址上的id变了，但是获取的id没变还是1

点击分类--电脑，获取的id就变了

代码如下

<div class="view_box">
    <div>
        <ul>
            <li>
                <router-link to="/cate">
                    <div style="text-align: center;">分类</div>
                </router-link>
            </li>
        </ul>
    </div>
    <router-view></router-view>
</div>

<!-- 分类左面 -->

<template id="cate_view_left">
    <div>
        <ul style="width: 20%;float: left;">
            <li v-for="(info,idx) in cate_list">
            <router-link :to="{name:'cate1',params:{id:info.id}}">{{info.cate_name}}</router-link>        
            </li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<!-- 分类右面 -->

<template id="cart_view_right">
    <div>
    <ul style="width: 80%;float: right;">
        <li>            
            {{id}}<!-- 这个id不变 -->
        </li>
    </ul>
    </div>    
</template>

js

<script type="text/javascript">
    var router = new VueRouter({
        routes:[{
                    path:'/cate',
                    component:{
                        data(){
                            return {
                                cate_list:[{id:1,cate_name:'手机'},
                                           {id:2,cate_name:'电脑'}]
                            }
                        },
                        template:'#cate_view_left'
                    },
                    children:[{
                        path:'right/:id',
                        name:"cate1",
                        component:{
                            data(){
                                return{
                                    id:''
                                }
                            },
                            created(){
                                this.id=this.$route.params.id
                            },
                            template:'#cart_view_right'
                    }}]
                }]
    })

    new Vue({
        el:'.view_box',
        router
    })
</script>

Answer 1

你right/1和right/2共用一个模板，在第二次切换时，组件已经是生成的，组件的生命周期钩子并不会再次被调用。在‘点击分类--手机’，组件的生命周期被调用了，这时‘点击电脑’生命周期钩子就不被调用，所以没有执行created里边的赋值，所以this.id一直都是刚进来的1的。
解决的方式你可以添加个watch，监控着route的变化，如果有变化进行赋值就可以。

component:{
        data(){
            return{
                id:''
            }
        },
        watch:{
            '$route'(){
                this.id = this.$route.params.id;
            }
        },
        created(){
           this.id = this.$route.params.id;
        },
        template:'#cart_view_right'
}

你可以参考文档中给出的响应路由参数的变化

Answer 2

在组件里面监听route

Answer 3

https://segmentfault.com/a/11...
看我文章 第一条

Answer 4

watch:{
'$route': 'functionName'
}

用watch监听路由的改变，functionName是你路由改变后要执行的函数