前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue.js路由嵌套

vue.js路由嵌套

作者头像
章鱼喵
发布2018-08-02 15:30:47
2.8K0
发布2018-08-02 15:30:47
举报
文章被收录于专栏:codingcoding

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

  • /account 账号路由
  • /account/login 登录路由
  • /account/register 注册路由

实现的效果如下(注意察看路由地址的变化):

路由嵌套.gif

  • 账号路由导航及路由视图
代码语言:javascript
复制
<div id="app">
    <router-link to="/account" tag="button" class="btn btn-info">账号操作</router-link>
    <router-view></router-view>
</div>
  • 账号组件

组件中包含了登录和注册的路由导航及视图,形成了嵌套关系

代码语言:javascript
复制
<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>
  • 登录和注册组件
代码语言:javascript
复制
<template id="login">
    <h3>登录</h3>
</template>

<template id="register">
    <h3>注册</h3>
</template>
  • 定义路由规则
代码语言:javascript
复制
let router = new VueRouter({
    routes: [
        {
            path: '/account',
            component: account,
            children: [
                { path: 'login', component: login },
                { path: 'register', component: register }
            ]
        }
    ]
});

路由规则

具体代码

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.07.07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档