Vue中嵌套路由的使用

最新推荐文章于 2024-07-04 09:10:04 发布
最新推荐文章于 2024-07-04 09:10:04 发布
阅读量1.9k 收藏 8
点赞数 2
分类专栏： Vue 文章标签： 嵌套路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43851769/article/details/86620978
版权

上一篇说到了动态路由，这一篇说一下嵌套路由的使用。
那么我们来看一下官方的一个图
在这里插入图片描述
从上图就可以看出在同一个视图中，User不变的情况下Profile和posts的转换了，那么这就说明了这两者都是User中的嵌套路由，也可以叫子路由。另外作用也呼之欲出。
嵌套路由可以在整体视图不变的情况下部分内容的变化。

下面还是以我写的一个后台管理系统作为案例
先来看一下效果图
在这里插入图片描述
这里看到了在固定的一个位置商品管理、订单管理、用户列表之间的切换。
在这里插入图片描述
这里的这个Home-main组件就是用来显示商品管理、用户管理这些子路由的。
但是这个组件并不是他们的父组件！我将他们放在了Home组件的下面

<router-view></router-view>	//路由出口, 路由匹配到的组件将渲染在这里！

下面看一下如何配置嵌套路由
在这里插入图片描述
只需要在普通的路由中加一个children：[]，然后在这个里面写一个路由就可以了，这样也就成为了嵌套路由。

跳转的方法不变，只需要写上配置好的子路由路径即可。
在这里插入图片描述

哪里写的不好或有什么问题，请评论告诉我，万分感谢！

尘生杜若丶
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue路由嵌套详解
qq_41359998的博客
08-19 3201
Vue路由嵌套详解 嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。 demo 1.创建用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件； <template> <h1>个人信息</h1> </template> <script> export default { name: "UserProfile" } </script> <style scoped&gt
VUE多层路由嵌套实现代码
08-30
VUE多层路由嵌套实现代码 VUE多层路由嵌套是一种复杂的路由机制，能够满足复杂的应用场景需求。该实现代码主要是通过定义多个模板和路由对象，然后将其组合起来实现多层路由嵌套。 1. 定义模板 首先，我们需要...
vue嵌套路由
qq_44231797的博客
10-26 3163
文章目录一、为什么要使用嵌套路由？二、步骤演示：1.在views目录下新建user目录，编写User.vue和Profile.vue2.配置路由信息 router/index.js3.编写Main.vue4.编写main.js，导入路由信息三、碰到的问题四、解决方案方案一方案二 一、为什么要使用嵌套路由？ 就比如在一个页面中， 在页面的上半部分，有三个按钮，而下半部分是根据点击不同的按钮来显示不同的内容，那么我们就可以在这个组件中的下半部分看成是一个嵌套路由，也就是说在这个组件的下面需要再来一个 <
使用Vue3展示在Vue Router中实现嵌套路由
最新发布
有我更精彩的博客
07-04 1036
在今天的这篇博客中，我们将深入探讨如何在Vue3中使用Vue Router实现嵌套路由。嵌套路由是构建复杂单页应用(Single Page Application, SPA)的核心，你可以使用这一特性来组织应用的不同视图层次结构。无论你是面试准备，还是在工作中需要这个技能，这篇文章都会帮助你掌握这些知识。
Vue中路由嵌套的使用
南风花海的博客
10-14 243
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件 。我们以品字布局为例讲解： <!-- * @Author: [jsh] * @Date: 2021-10-13 16:04:57 * @LastEditors: [jsh] * @LastEditTime: 2021-10-14 11:20:06 * @Description: --> <!DOCTYPE html> <html lang=..
vue中嵌套路由的使用
weixin_44022064的博客
12-03 47
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
vue中的路由嵌套
programmer1230的博客
05-10 87
routes:[ { path:"/home", name:"Home", components:Home, //子路由 children:[ { path:"child", name:"Child", components:"Child" } ] } ]
解决vue-router 嵌套路由没反应的问题
10-14
原因在于，Vue Router中的嵌套路由需要父路由有一个对应的组件，该组件中包含一个`<router-view>`标签，用于渲染子路由对应的组件。在原始的配置中，`/course`路由没有指定组件，因此Vue Router无法找到放置子路由...
Vue三层嵌套路由的示例代码
08-27
通过这个示例代码，我们可以学习如何在 Vue 中实现三层嵌套路由，并且了解如何使用状态管理来实现选项卡的切换。 知识点： * Vue 嵌套路由的实现 * 使用 `router-link` 组件来实现路由之间的跳转 * 使用 `router-...
在Vue中通过vue-router实现路由嵌套
01-08
随着Vue单页应用(SPA)变得复杂 需要使用路由嵌套 路由嵌套允许更复杂的用户界面以及相互嵌套的组件 如果对Vue的路由不太熟悉 请参看我的另一篇博客：Vue学习之旅Part9：使用vue-router实现前端路由和参数传递 路由...
Vue中的路由嵌套
m0_59345890的博客
09-11 2640
我们还可以做一个优化，在home路由对应的组件加载到页面时，我们需要默认加载一个子路由时，我们需要做一个重定向，在home路由中redirect:"重定向的子路由网址"。路由嵌套，即在当前路由中注册子路由中，形成父子结构，显示子路由对应的组件，需要网址在父路由的pathname下才能实现，后面再具体演示。子路由内也可以注册它的子路由，一直下去就可以形成一个庞大的“家族”。这个时候子路由已经注册好了，子路由的path路径都是在父路由的基础下创建，我们再在对应引入组件的位置创建好组件。
vue嵌套路由的使用
弹指一挥间
06-25 827
注意：在一个路由里面加别的路由 要加 &lt;router-view&gt;&lt;/router-view&gt; 和router-link嵌套路由指的就是在一个路由里面嵌套另一个路由了，虽然没有那么难但还是要注意几个点1.在routes里面加上children[]然后这个里面在添加嵌套路由的参数 children:[,注意：path里面不用加/直接写名字就好了 component里面不用加...
Vue之----路由嵌套
aaa123_456aaa的博客
11-20 2189
1、嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。（其实就是套娃操作罢了，跟后端的视图跳转路径蛮像的）： 2、 创建用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件： Profile.vue <template> <h1>咸鱼_翻身1</h1> </template> <script> export default { name: "UserList" } &lt
vue路由嵌套
m0_67388537的博客
07-25 134
实际生活中的应用界面，通常由多层嵌套的组件组合而成。一个页面当中有多个子页面 这种结构叫做嵌套路由。需要在children中指定相应的子路由。
路由的嵌套使用
jwz934738949的博客
07-27 306
路由的嵌套使用，指的就是在一个组件中嵌套使用一个组件，该组件是子组件 首先创建子组件，并且在index.js文件中使用懒加载，导入该组件，并且在routes中的home组件中添加children属性，添加子组件 const HomeNews = () => import('../components/HomeNews') const HomeMessage = () => import('../components/HomeMessage') 需要注意的是，添加子组件时的path属性中不.
浅谈 Vue 路由嵌套
Jay的博客
01-16 247
一、前言 在实际的开发中，我们的界面基本都是多层嵌套组合在一起的。为了能直观的查看项目的结构, Vue Router 引入的嵌套路由的功能。 二、写法 首先，我们先回顾一下非嵌套路由的写法： 引入vue-router 编写配置文件 const route = [ { path: '/foo', component: Foo}] 指定显示的位置 <router-view&gt...
Vue -- 路由嵌套
天行健 君子以自强不息，地势坤 君子以厚德载物。
05-22 493
1. Vue--路由嵌套 嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。 搭建环境同上（只是把Login组件删除了） 1.1 新建Profile子组件（个人信息） Profile.Vue <template> <h1>个人信息</h1> </template> <script> export default { name: "UserProfile" } </script> <style
Vue中嵌套路由的使用方法
weixin_46486125的博客
10-07 533
实际生活中的应用界面，通常由多层嵌套的组件组合而成。比如二级菜单，三级菜单。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。最外层 是最顶层的出口，渲染最高级路由匹配到的组件。 同样地，一个被渲染组件同样可以包含自己的嵌套 。要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置： const router = new VueRouter({ routes: [ { path: ‘/article/:id’, component: Article}, { p
vue3嵌套路由
本作者：想花
04-14 1501
本人vue不熟练，最初我也不知道嵌套路由是干嘛用的，直到后来有个需求是在两个VUE组件中都设置<router-view />，然后两个组件需要挂载的元素不一样。 本人的项目结构： 然后App.vue里面写死了直接挂载Index.vue，然后Index.vue有两个按钮可以挂载A.vue和B.vue。然后A.vue可以挂载C.vue 相当于Index.vue组件可以挂载A.vue，A.vue可以挂载C.vue，这就是嵌套。 实现关键 1. 配置路由文件 src目录下新建router/route
vue中嵌套路由的实际使用场景
07-04
在Vue.js中，嵌套路由（Nested Routes）实际应用场景通常发生在以下几个情况： 1. **模块化的页面结构**：当你有一个大型应用，包含多个相互独立的子区域或功能模块，如用户管理、产品列表和详情页等。每个子区域都有自己的路由，此时就可以使用嵌套路由，将它们组织为父-子关系。 ```html // 示例 { path: '/admin', component: AdminLayout, children: [ { path: 'users', component: UsersList }, { path: 'products', component: ProductsList } ] } ``` 在这里，`AdminLayout`是一个包含了用户列表和产品列表两个子组件的容器组件。 2. **导航栏动态加载**：如果导航菜单的内容根据用户的权限或当前登录状态变化，可以通过动态路由配置，当访问特定子路径时动态加载对应组件。 3. **单页应用（SPA）分页或无限滚动**：例如文章列表页，每个页可以显示一部分内容，用户可以向下滚动加载更多内容，这时可以设置一个根路由，内部使用嵌套路由处理每一页的数据。 4. **侧边栏菜单与内容分离**：侧边栏菜单链接到不同的子路由，内容区域显示路由对应的视图。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值