vue-路由嵌套

最新推荐文章于 2022-11-26 23:46:19 发布

Serendipiy_yyj

最新推荐文章于 2022-11-26 23:46:19 发布

阅读量437

点赞数

分类专栏：笔记文章标签： vue.js 前端 javascript 路由算法前端框架

本文链接：https://blog.csdn.net/weixin_46643055/article/details/121593579

版权

笔记专栏收录该内容

71 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中路由嵌套的概念，通过一个实例展示了如何在Layout.vue组件中创建导航链接，并在router/index.js中配置二级路由。主要流程包括在布局组件内定义嵌套路由链接，设置`<router-view>`展示对应组件，以及在路由模块中为布局组件添加子路由并设置重定向。这个过程形象地被比喻为‘套娃’，即一层路由内嵌另一层路由，实现复杂页面间的平滑切换。

摘要由CSDN通过智能技术生成

网页页面从登录、注册首页进行路由切换，在进入首页之后又会出现新的导航用于切换新的页面导航，这样的导航跳转属于路由嵌套-----简单来说就是“套娃”

例：在布局组件Layout.vue中添加新的导航

<template>
  <div class="layout-container">
      <!-- 展示嵌套路由对应的组件的位置 -->
      <router-view></router-view>
      
      <!-- 定义嵌套路由的导航链接 -->
      <nav>
        <div><router-link to="/main/home">主页</router-link></div>
        <div><router-link to="/main/goods">商品</router-link></div>
        <div><router-link to="/main/profile">用户</router-link></div>
        <div><router-link to="/main/concat">我</router-link></div>
      </nav>
  </div>
</template>

编辑路由模块router/index.js,调整匹配规则，添加二级路由


const routes = [
    ...
    { 
        path: "/main", 
        component: Layout,
        meta: {
            title: "系统首页"
        },
        redirect: "/main/home",		// 展示布局组件时，自动展示主页组件
        children: [					// 定义嵌套路由
            {
                path: "home",
                component: Home
            },
            {
                path: "goods",
                component: Goods
            },
            {
                path: "profile",
                component: Profile
            },
            {
                path: "concat",
                component: Concat
            }
        ]
    }
]

主要流程总结：

1、在布局组件中定义嵌套路由的导航链接<router-link to = " 路径 ">页面内容</router-link>

2、展示嵌套路由对应组件位置<router-view></router-view>

3、路由模块找到需要嵌套的模块：如Layout组件，给其添加children，里面添加路由匹配规则，通常给嵌套的路由界面展示布局组件时，重定向为主页页面