Vue-Router路由嵌套

阅读更多

原文地址：http://www.hxstrive.com/article/596.htm

 

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

上图中，用户管理（/user）为一级路由，而基础信息（/user/baseInfo）或电子邮件（/user/emails）为二级路由。下面我们将介绍怎样使用vue-router来实现这个Demo。

在开始之前我们使用 “vue init webpack vue-router-test”创建“vue-router-test”vue项目。在创建过程中，请选择安装 vue-router 组件（如果不会创建，则参考Vue-Router入门文章）。

下图是项目的结构：
其中：Home.vue（主页）、User.vue（用户管理）一级路由，Phones.vue（联系方式）和Emails.vue（电子邮件）二级路由。具体代码如下：

Home.vue

User.vue

Emails.vue

Phones.vue

App.vue

index.js
该文件位于router/index.js，用来配置 vue-router。代码如下：
import Vue from 'vue'
// 导入 vue-router 组件
import Router from 'vue-router'
 
// 导入自己的组件
import Home   from '@/components/Home'
import User   from '@/components/User'
import Emails from '@/components/Emails'
import Phones from '@/components/Phones'
 
// 使用 vue-router 路由组件
Vue.use(Router)
 
export default new Router({
    routes: [
        // 一级路由配置
        {path: '/home', name: 'Home', component: Home},
        // redirect表示进入 /user 路由时，默认路由到 /user/emails
        {path: '/user', name: 'User', redirect:'/user/emails', component: User, children: [
            // 二级路由配置
            {path: '/user/emails', component: Emails},
            {path: '/user/phones', component: Phones}
        ]}
    ]
})

下图是最终运行效果图：

其中：主页/用户管理是一级路由，电子邮件和联系方式是二级路由。

总结：
嵌套路由是在路由下面的children属性下面添加路由信息。如下：
export default new Router({
routes: [
        {path: '/home', name: 'Home', component: Home},
        {path: '/user', name: 'User', component: User, children: [
            {path: 'emails', component: Emails},
            {path: 'phones', component: Phones}
        ]}
    ]
})

如果你在访问/user时，不会渲染任何东西。这是因为没有匹配的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：
export default new Router({
routes: [
        {path: '/home', name: 'Home', component: Home},
        {path: '/user', name: 'User', component: User, children: [
            {path: '', component: Emails},
            {path: 'emails', component: Emails},
            {path: 'phones', component: Phones}
        ]}
    ]
})