在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ vue路由配置子路由路徑以后，$router.push無法切換路由,代碼如下面所

vue路由配置子路由路徑以后，$router.push無法切換路由,代碼如下面所示

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>

</head>
<body>

<div id="box">
    <div>
        <router-link to="/home">主頁</router-link>
        <router-link to="/user">用戶</router-link>
    </div>
    <div>
       <router-view></router-view>
    </div>
    <a href="javascript:;" @click="add">pushusername</a>
    <a href="javascript:;" @click="add1">pushidd</a>
</div>
<script>
    //準(zhǔn)備組件
    var Home={
        template:'<h3>我是主頁</h3>'
    };
    const User={
        template:`<div>
                <h3>我是用戶信息</h3>
                  <ul>
                    <li><router-link to="/user/username">某個用戶</router-link></li>
                  </ul>
                  <div><router-view></router-view></div>
                </div>`
    };
    const IDd = {
        template:`<div>
        pushidd
        </div>`
    }
    const username = {
        template:`<div>
        pushusername
        </div>`
    }
    var userdetail = {
        template:'<h3>我是某某用戶</h3>'
    }
    //配置路由
    const routes=[
        {path:'/home',component:Home},
        {path:'/user',component:User,
        children:[
        {
            path:':id',component:IDd
        },
        {
            path:'username',component:username
        }]},
        {path:'*',redirect:'/home'}
    ];
    //生成路由實例
    const router = new VueRouter({
        routes:routes
    });
    //最后掛載
    new Vue({
        router:router,
        el:'#box',
        methods:{
            add(){
                alert(1)
            this.$router.push({
                path: '/user/username'
            })
            },
            add1(idd){
                alert(2)
            this.$router.push({
                path: '/user/1'
            })
            }
        }
    })
</script>

</body>
</html>

點擊按鈕pushusername或者pushidd都會顯示idd組件，無法顯示出來pushusername組件。但是瀏覽器地址欄會正常顯示路由的地址，如下所示：
點擊pushusername時顯示#/user/username
點擊pushidd時顯示#/user/1

但是如果不適用參數(shù)傳遞:id配置路由的話就可以正常切換

希望哪位大佬賜教

回答
編輯回答
寫榮

path:':id',component:IDd 寫法不對，看這里：
https://jsfiddle.net/yyx99080...

尤雨溪親自給你示范：）

2018年4月11日 07:22
編輯回答
祉小皓

在 vue2 的頁面中若有/user/1,/user/2,/user?id=1,/user?id=2此類路由的相互跳轉(zhuǎn)，需要通過監(jiān)聽$route來刷新數(shù)據(jù)
故若遇到此類同路由的跳轉(zhuǎn),應(yīng)當(dāng)如下取做處理

created () {
  this.fetchData()
},
watch: {
  '$route': 'fetchData'
},
methods: {
  fetchData () { ... }
}

關(guān)于這個問題的討論有興趣的可以看這個issues討論

2017年3月15日 19:03
編輯回答
影魅

我覺得是因為username也可以作為:id這個參數(shù)值傳入，所以后面的/username就不會去匹配了。把username那個路由配置放在:id的前面，應(yīng)該就可以了

2017年10月27日 10:59