不是每一个路由都从根目录开始，如登录和注册两个路由都属于帐号操作，我们想将这两个路由作为账号的子路由。
/account 账号路由
/account/login 登录路由
/account/register 注册路由
实现的效果如下(注意察看路由地址的变化)：
路由嵌套.gif
- 账号路由导航及路由视图
<div id="app">
<router-link to="/account" tag="button" class="btn btn-info">账号操作</router-link>
<router-view></router-view>
</div>
- 账号组件
组件中包含了登录和注册的路由导航及视图，形成了嵌套关系
<template id="account">
<div>
<h3>账号组件</h3>
<router-link to="/account/login" tag="button" class="btn btn-success">登录</router-link>
<router-link to="/account/register" tag="button" class="btn btn-danger col-lg-offset-1">注册</router-link>
<router-view></router-view>
</div>
</template>
- 登录和注册组件
<template id="login">
<h3>登录</h3>
</template>
<template id="register">
<h3>注册</h3>
</template>
- 定义路由规则
let router = new VueRouter({
routes: [
{
path: '/account',
component: account,
children: [
{ path: 'login', component: login },
{ path: 'register', component: register }
]
}
]
});
路由规则
