不是每一个路由都从根目录开始,如登录和注册两个路由都属于帐号操作,我们想将这两个路由作为账号的子路由。
-
/account 账号路由
-
/account/login 登录路由
-
/account/register 注册路由
实现的效果如下(注意察看路由地址的变化):
- 账号路由导航及路由视图
<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 }
]
}
]
});
本站以现代、古代情诗为主,情诗网创办于2013年,以原创爱情诗歌、经典情诗、现代情诗、古代情诗、英文情诗、情诗绝句为主并收集古诗、古诗词、诗歌大全、诗词名句的文学门户。方便您下次继续阅读;可以放在浏览器的收藏夹中(快捷键Ctrl+D);或者看到喜欢或者有趣的诗词可以通过分享按钮给你的好友分享;情诗网是目前最全情诗大全网站之一。并欢迎广大诗歌爱好者阅览投稿!喜欢本站的话请大家把本站告诉给你朋友哦!地址是 www.qingshiwang.com !