Vue 使用篇(一)：的to屬性綁定命名路由問題

一、問題描述

使用的to屬性綁定到一個含有子路由的命名路由上時，子路由的組件沒法顯示。

<!-- html -->
<div id="app">
    <p>
        <router-link :to="{name:'userRouter',params:{id:'list'}}">命名路由方式：/user/list</router-link>
        <router-link :to="'/user/list'">直接設置path方式：/user/list</router-link>
    </p>

    <router-view></router-view>
</div>
複製代碼

// js
'use strict'

const app = {
    template : `
    <div>
        <h2>User {{ this.$route.params.id }}</h2>
        <router-view></router-view>
    </div>
    `
};

const UserNone = {template : "<div>home</div>"};

const routes = [
    {   
        name : "userRouter",
        path : "/user/:id",
        component : app,
        children : [
            {path : "", component: UserNone}
        ]
    },
]

const router = new VueRouter({
    routes : routes
});

const vm = new Vue({
    router
}).$mount("#app");

複製代碼

兩種方式的URL都是同樣的(/user/list)，可是命名路由的這種方式卻不能顯示內部默認子路由所設置的UserNone組件。

二、解決方案

當路由內部含有默認子路由的時候，<router-link>的to屬性就不該該連接到該命名路由上了，而是連接到它的默認子路由上。

<router-link :to="{name:'userRouterNone',params:{id:'list'}}">命名路由方式：/user/list</router-link>

const routes = [
    {   
        name : "userRouter",
        path : "/user/:id",
        component : app,
        children : [
            {
                name: ""
                path : "userRouterNone",
                component: UserNone}
        ]
    },
]
複製代碼