Vue2 VueRouter 命名路由、命名视图实现组件布局

Question

1. 命名路由

const router = new VueRouter({
    routes:[
        {
            path:'/user/:userId',
            name:'user',
            component:User
        }
    ]
})
# 或者
<router-link :to="{ name:'user',params:{ userId:123}}">user</router-link>

2. 命名视图实现组件布局

命名视图的 name 属性，没有 v-bind 绑定时，为字符串；有则为变量

<div id="app">
    <router-view></router-view>
    <router-view name="left"></router-view>
    <router-view name="main"></router-view>
</div>

{
    path:'/',
    components:{
        'default':header,
        'left':leftBox,
        'main':mainBox
    }
}