不是每一个路由都从根目录开始，如登录和注册两个路由都属于帐号操作，我们想将这两个路由作为账号的子路由。

  • /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 }
            ]
        }
    ]
});
路由规则

具体代码

更多vue.js的有趣实例，请点击移步至目录

本站以现代、古代情诗为主，情诗网创办于2013年，以原创爱情诗歌、经典情诗、现代情诗、古代情诗、英文情诗、情诗绝句为主并收集古诗、古诗词、诗歌大全、诗词名句的文学门户。方便您下次继续阅读；可以放在浏览器的收藏夹中（快捷键Ctrl+D）;或者看到喜欢或者有趣的诗词可以通过分享按钮给你的好友分享；情诗网是目前最全情诗大全网站之一。并欢迎广大诗歌爱好者阅览投稿！喜欢本站的话请大家把本站告诉给你朋友哦！地址是 www.qingshiwang.com ！