Vue 使用篇(一)：<router-link>的to属性绑定命名路由问题

1、问题描述

使用的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组件。

2、解决方案

当路由内部含有默认子路由的时候，<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}
        ]
    },
]