vue嵌套路由

关于嵌套路由

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

应用场景

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

案例

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

1.效果
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属性,防止样式互相干扰。

本文分享自微信公众号 - 流眸(zxm0146),作者:Lomo|朱幸民

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS——loading动画

      由图可见,动画1中有三根竖线,在进行变长变短的高度变化以及线条的颜色变化,因此分为以下几个步骤:

    流眸
  • 电商放大镜及动态边框效果

      但是以上两个思路均有问题。如果设置border,如何使其边框动画?如果周边设置4个div,那么不仅是需要js操控,并且无形之中增加了许多复杂度,与编程思想背...

    流眸
  • 520特辑———旋转爱

    520:网络情人节是信息时代的爱情节日,定于每年的5月20日和5月21日。该节日源于歌手范晓萱的《数字恋爱》中“520”被喻成“我爱你” ,以及...

    流眸
  • React Router5 感性认知

    本文主要是了解下 react-router 新版本一些理念,为我们以后的开发注入一些感性认知。

    zz_jesse
  • Vue-Router 入门与提高实战示例

    路由(routing)是指从源到目的地时,决定端到端路径的决策过程。 对于VueRouter而言,路由就是根据一个请求路径选中一个组件进行 渲染的决策过程:

    笔阁
  • 06 . Vue路由简介,原理,实现及嵌套路由,动态路由,编程式导航

    基于URL的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)

    常见_youmen
  • vue-roter2 路由传参

    用户1741436
  • vue-roter2 路由传参

    用户1741436
  • React 开发必须知道的 34 个技巧【近1W字】

    React 是前端三大框架之一,在面试和开发中也是一项技能; 本文从实际开发中总结了 React 开发的一些技巧技巧,适合 React 初学或者有一定项目经验的...

    火狼1
  • React 开发要知道的 34 个技巧

    原理:子组件里面利用 props 获取父组件方法直接调用,从而改变父组件的值 注意: 此方法和 props 大同小异,都是 props 的应用,所以在源码中没有...

    1024 FED

扫码关注云+社区

领取腾讯云代金券