vue-router切換傳參不變

vue路由切換的時(shí)候獲取的this.$route.params.id不變，
需要點(diǎn)分類(lèi)然后再點(diǎn)電腦，手機(jī)才可以變，如圖

點(diǎn)擊分類(lèi)--手機(jī)
圖片描述

點(diǎn)擊電腦，地址上的id變了，但是獲取的id沒(méi)變還是1
圖片描述

點(diǎn)擊分類(lèi)--電腦，獲取的id就變了
圖片描述

代碼如下

<div class="view_box">
    <div>
        <ul>
            <li>
                <router-link to="/cate">
                    <div style="text-align: center;">分類(lèi)</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}}<!-- 這個(gè)id不變 -->
        </li>
    </ul>
    </div>    
</template>

<script type="text/javascript">
    var router = new VueRouter({
        routes:[{
                    path:'/cate',
                    component:{
                        data(){
                            return {
                                cate_list:[{id:1,cate_name:'手機(jī)'},
                                           {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>

回答

編輯回答

傲嬌范

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

2017年8月22日 19:36

編輯回答

熊出沒(méi)

你right/1和right/2共用一個(gè)模板，在第二次切換時(shí)，組件已經(jīng)是生成的，組件的生命周期鉤子并不會(huì)再次被調(diào)用。在‘點(diǎn)擊分類(lèi)--手機(jī)’，組件的生命周期被調(diào)用了，這時(shí)‘點(diǎn)擊電腦’生命周期鉤子就不被調(diào)用，所以沒(méi)有執(zhí)行created里邊的賦值，所以this.id一直都是剛進(jìn)來(lái)的1的。
解決的方式你可以添加個(gè)watch，監(jiān)控著route的變化，如果有變化進(jìn)行賦值就可以。

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

你可以參考文檔中給出的響應(yīng)路由參數(shù)的變化

2018年8月5日 02:19

編輯回答