vue嵌套路由，二级路由使用介绍

vue-router 嵌套路由，二级子路由

项目中如果都是一级路由，路由管理会有些乱。嵌套路由是路由中包含路由的意思，组件中可以有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套，在vue组件中使用<router-view>就可以了。

1.嵌套路由的使用场景

当项目中有选项卡时，切换选项卡按钮，页面中间部分的内容会变，但是选项卡按钮不会变；页面中间部分内容的变化就可以通过二级子路由实现，中间部分显示的内容就是二级子路由的内容

2.举个例子

在组件中：

<router-view> 是用来渲染通过路由映射过来的组件，当路径更改时，<router-view> 中的内容也会发生更改

<template><div class="me"><div class="me-header">个人中心</div><h3>二级路由，嵌套路由</h3><div class="tab"><router-link to="/me/a"><div class="children">我是a组件</div></router-link><router-link to="/me/b"><div class="children">我是b组件</div></router-link><router-link to="/me/c"><div class="children">我是c组件</div></router-link></div><router-view/></div>
</template>

在router的index中子路由配置：

  {path: '/me',name: 'me',component:  ()=> import('@/views/me.vue'),children: [{path: 'a',component: () => import('@/components/me/a.vue'),},{path: 'b',component: () => import('@/components/me/b.vue'),},{path: 'c',component: () => import('@/components/me/c.vue'),},]  }

点击“我是a组件”按钮路由就渲染me下的a组件内容，点击“我是b组件”按钮路由就渲染me下的b组件内容，点击“我是c组件”按钮路由就渲染me下的c组件内容

效果如下：

点击我是a组件

点击我是b组件

点击我是c组件

vue嵌套路由，二级路由使用介绍相关推荐

vue中的for循环路由二级路由
vue中的for循环路由二级路由 1.第一步先写需要使用的仓库,里面是需要循环的数据name的设置,class的名称,以及要跳转的路径名称 2.第二部分的样式,在正文中进行循环输出.这里需要使用rou ...
关于vue,在当前二级路由点击第三级路由的时候,替换当前的二级路由
关于vue,在当前二级路由点击第三级路由的时候,替换当前的二级路由首先需要让二级路由和三级路由平级,也就是把二级路由也在三级路由里面, 让二级路由去重定向到三级路由 component写成一个方法来 ...
vue 二级路由嵌套和二级路由高亮问题
第一层路由我写在app.vue里面.如图所示: footer.vue: 二级路由是这样: index.js里面的配置: 效果图: 效果出来了,又出现新的问题,就是点击二级路由的时候,默认的二级路由高亮 ...
vue-router 路由创建、路由嵌套、二级路由
文章目录前言说明一.路由起步二.使用步骤 1.创建项目 2.安装路由 3.创建文件 1.Test.vue文件 2.index.js文件 3.App.vue文件三.运行项目 1.在项目文件下打 ...
群晖双网口虚拟机openwrt主路由二级路由拨号上网配置
最终目的如下图: 目录一. 虚拟机套件配置二. openwrt安装三. openwrt配置首先按照下图连接设备一.虚拟机套件配置 1.1 安装虚拟机套件后,在控制面板开启open vSwit ...
vue学习 32路由精讲之二级路由和三级路由
分级时,默认打开指定下级的路由,使用redirect属性,其值为子级路由的路径path. 子级使用属性children: 值为数组,数组中每个元素都是一个路由对象二级路由在main.js中配置路由 ...
【Vue知识点- No7.】路由、vant组件库的使用
No7.路由.vant组件库的使用学习目标 1.能够了解单页面应用概念和优缺点 2.能够掌握vue-router路由系统使用 3.能够掌握链接导航和编程式导航用法 4.能够掌握路由嵌套和路由守卫 5 ...
vue2路由手动创建二级路由路由传参路由守卫打包上线
路由手动配置: #在@vue/cli创建的项目中,路由用法如下. 1.安装路由npm install vue-router@32:定义路由所需的组件(.vue文件)要实现页面about 和home两个 ...
vue 路由嵌套(二级路由)
路由嵌套就是在父路由配置好后,配置一个children属性,里面放置的的内容跟routes属性下面的内容大体一样,这就是二级路由的配制方法. 嵌套路由的关键字children,在父路由中添加child ...

vue嵌套路由，二级路由使用介绍

vue嵌套路由，二级路由使用介绍相关推荐

最新文章

热门文章