关于嵌套路由

  在实际项目中，多个前端页面由于需求而通常由多层嵌套的组件组合而成,尤其是多导航界面。此时，路由嵌套(vue-router)的优点则表现了出来。嵌套路由就是在一个被路由过来的页面下，可以继续使用路由来加载新的组件。所谓嵌套，也可以理解成父子路由。

应用场景

  • 各样式导航栏切换；
  • 标签/选项卡切换；

案例

  此处以常用布局F形导航当作分析案例：

1.效果
路由嵌套.gif
2.解析
/App/about/blog                       /App/about/msg    
+------------------+                  +-----------------+
| about            |                  | about            |
| +--------------+ |                  | +-------------+ |
| | blog         | |  +------------>  | | msg         | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+
3.目录拆分

观察效果图，容易得出可将图拆分为多个组件。在主要vue中挂载首页和关于组件，然后在关于组件中再次挂载子路由博客和信息组件。项目中src目录拆分如下：

├── src 
│  ├── page 
│  │  ├── index.vue // 主页组件
│  │  ├── about.vue // 关于组件
│  │  ├── about 
│  │  │  ├──  blog.vue  // 博客子组件
│  │  │  ├──  msg.vue   // 信息子组件
│  ├── router   
│  │  ├── index.js  
│  ├── App.vue  
│  ├── main.js
4.通用代码

从目录中可以轻易的看出每个组件及所代表的模块。其中，index & blog & msg 三个组件均为一个带文字描述的块级元素，此处给出一个示例，不再赘述。

<template>
    <div>
        这是xx模块内容
    </div>
</template>
5.路由管理

router/index.js进行路由管理，代码如下。此处使用懒加载模式处理。开篇已经描述，嵌套路由可以理解为父子路由，不仅如此描述，事实上我们在做路由管理也是这么处理的。注：在children中的path不必再添加/，否则会出错。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

export default new VueRouter({
    routes: [
        {
            path: '/index',
            component: resolve => require(['@/page/index'],resolve),
        },
        {
            path: '/about',
            component: resolve => require(['@/page/about'],resolve),
            children: [
                {
                    path: 'blog',
                    component: resolve => require(['@/page/about/blog'],resolve),
                },
                {
                    path: 'msg',
                    component: resolve => require(['@/page/about/msg'],resolve),
                }
            ]
        },
    ]
})
6.根组件配置

App.vue需要挂载首页组件和关于组件。值得一提的是，由于在点击关于的时候，应该直接跳往第一项子级项，也就是博客，因此注意路由路径。此外，切记to:"[路径]" 中的[路径]一定要加上/，否则多次路由会出现路由重复而无法正确找到路由问题。

<template>
    <div id="app">
       <header class="header">
           <router-link to="/index">首页</router-link>
           <router-link to="/about/blog">关于</router-link>
       </header>


        <router-view/>
    </div>
</template>

<script>
    export default {
        name: 'App',
    }
</script>

<style type="text/scss" lang="scss">
     /*略*/
</stylle>
7.about组件配置

所谓嵌套，或者说父子路由，在此组件表现出来，也就是将此组件当成父组件，再次挂载两个(或多个)子组件。同样，要注意路径一定要加上/。如下：

<template>
    <div class="about">
        <div class="left">
            <router-link to="/about/blog">博客</router-link>
            <router-link to="/about/msg">信息</router-link>
        </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "about"
    }
</script>

<style scoped type="text/scss" lang="scss">
    .about{
        display: flex;
        .left{
            width: 100px;
            border-right: 1px solid #aaa;
            height: calc(100vh - 46px);
            display: flex;
            flex-direction: column;
            a{
                line-height: 40px;
                text-align: center;
                font-size: 12px;
                text-decoration: none;
                color: #6260ff;
            }
        }
        .right{
            flex: 1;
        }
    }
</style>
8.完成

其实步骤就这么多，不过在实际项目中还是要多加动脑灵活运用，理解嵌套路由含义及路由配置规则，一切就会变得简单起来~

注

  有几点注意事项，包括上面也有提到过：

  • 子路由要写在children下；
  • router-link 中，to中的路径要加/，代表根路径；
  • 每一个子路由都可以嵌套多个组件；
  • style中加入scoped属性，防止样式互相干扰。

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