vue.js路由嵌套

章鱼喵

发布于 2018-08-02 15:30:47

2.8K0

发布于 2018-08-02 15:30:47

文章被收录于专栏：coding

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

/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 }
            ]
        }
    ]
});