不是每一个路由都从根目录开始, 如登录和注册两个路由都属于帐号操作, 我们想将这两个路由作为账号的子路由.
/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 }
- ]
- }
- ]
- });
路由规则
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/2a2fad33245529f30980cb2ecb3441dc3b9d6724/code/01/38.html
来源: http://www.jianshu.com/p/37217db21d8e