Vue3-30-路由-嵌套路由的基本使用

最新推荐文章于 2024-09-13 09:01:01 发布
最新推荐文章于 2024-09-13 09:01:01 发布
阅读量2.2k 收藏 22
点赞数 16
分类专栏： Vue3 文章标签： vue3 路由 嵌套路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39505245/article/details/135286014
版权

什么是嵌套路由

嵌套路由 ：就是一个组件内部还希望展示其他的组件，使用嵌套的方式实现页面组件的渲染。
就像 根组件 通过路由渲染 普通组件一样，嵌套路由也是一样的道理。

嵌套路由的相关关键配置

1、<router-view> 标签 声明 被嵌套组件 的渲染位置；
2、路由配置表中使用 children:[] 来声明 嵌套的子路由；
3、子路由 的path属性 中不可以带 /,否则无法匹配！
4、嵌套路由可以无限嵌套。

嵌套路由的语法格式

  {
   
        path:'/a'
了解本专栏 订阅专栏 解锁全文 超级会员免费看
NorthCastle
关注
专栏目录
订阅专栏
vue--有关于嵌套路由的事情（三）
qq_40693615的博客
05-19 412
上面的（二）文章是针对一个页面来说的单个路径，如果碰见了多层嵌套组成的一个页面的情况下，我们就可以在一个页面下控制不同的组件的变化了 切换页面的效果可以是嵌套路由来实现，首先在上一个App.vue页面中的最顶层的路由出口是 <router-view></router-view> 通过组件渲染的方式实现调控的整体的页面，也就是用来渲染最高级路由匹配到的组件。 那么嵌套路由也是同样可以用这个来进行渲染新的组件的，但是不是根组件的出口，是在这个最高级路由匹配到的组件中嵌套一个新的次级出口
详解vue-template-admin三级路由无法缓存的解决方案
11-21
`matched`包含了当前路由的所有匹配路径，包括所有嵌套的子路由。我们可以遍历`matched`，将所有需要缓存的路由组件的`name`添加到`cachedViews`数组中，从而确保二级路由组件也能被正确缓存。 然而，这种方法可能...
vue-router：嵌套路由的使用方法
01-21
模板抽离 我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> <template id=home> <div>首页</div> </template> <template id=news> <div>新闻</div> </template> 然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: '#home' }; const News = { template: '#news' }; 路由
vue3使用vue-router嵌套路由(多级路由)
tigerhhzz的博客
12-18 2969
Vue3 嵌套路由的使用和 Vue2 相差不大，主要的区别是 Vue3 的路由实例化使用了 createApp() 方法，所以实例化路由时需要传入根组件。另外，Vue3 的路由对象除了包含 Vue2 中的导航守卫、导航钩子和解析守卫等功能外，还新增了 meta prop 和 route prop。在使用嵌套路由时，建议将路由按照功能模块进行分层，每一层代表一个主要的功能块，每个层级下的路由数量不要过多，一般建议不要超过 10 个，层级也不要超过 5 层。
Vue路由二(嵌套多级路由、路由query传参、路由命名、路由params传参、props配置、＜router-link＞的replace属性)
最新发布
Bulut0907
09-13 1151
点击music2，页面的url变成了http://localhost:8080/#/news/music/detail?内容区显示Detail组件接收到id=2的相关内容。点击music3，页面的url变成了http://localhost:8080/#/news/music/detail?点击Music，页面的url变成了http://localhost:8080/music1#/news/music，但是并没有重新加载一次页面。导航栏的Music激活css样式，而且内容区显示Music组件的内容。
vue3嵌套路由
weixin_69318049的博客
11-28 2690
vue路由的使用及配置
【Vue3】嵌套路由
又言又语
08-15 726
本文介绍 Vue3 中嵌套路由的基本写法。
解决vue-router 嵌套路由没反应的问题
10-14
原因在于，Vue Router中的嵌套路由需要父路由有一个对应的组件，该组件中包含一个`<router-view>`标签，用于渲染子路由对应的组件。在原始的配置中，`/course`路由没有指定组件，因此Vue Router无法找到放置子路由...
在Vue中通过vue-router实现路由嵌套
01-08
随着Vue单页应用(SPA)变得复杂 需要使用路由嵌套 路由嵌套允许更复杂的用户界面以及相互嵌套的组件 如果对Vue的路由不太熟悉 请参看我的另一篇博客：Vue学习之旅Part9：使用vue-router实现前端路由和参数传递 路由...
Vue3实战笔记（24）—路由Vue-Router 实战指南（嵌套路由）
山花的博客
05-16 1007
一些应用程序的 UI 由多层嵌套的组件组成。在实际应用中，许多页面都有固定的头部和底部，而中间的内容部分会根据路由变化而变化。比如，一个用户面板，顶部是标题和导航，底部是版权信息，中间部分可能是用户信息、订单列表或者设置选项等。在 Vue-Router 中，我们可以为每个路由定义一个组件，而嵌套路由允许我们在这些组件内部再定义子路由，每个子路由也可以有自己的组件。这样，当访问子路由时，相应的组件就会渲染到父路由组件的 中。说白了，嵌套路由多用于布局管理中。人生如梦，一切都是过眼云烟。
使用Vue3展示在Vue Router中实现嵌套路由
有我更精彩的博客
07-04 1630
在今天的这篇博客中，我们将深入探讨如何在Vue3中使用Vue Router实现嵌套路由。嵌套路由是构建复杂单页应用(Single Page Application, SPA)的核心，你可以使用这一特性来组织应用的不同视图层次结构。无论你是面试准备，还是在工作中需要这个技能，这篇文章都会帮助你掌握这些知识。
详解Vue3中的嵌套路由和编程式路由
一起学习
12-25 1940
本文主要介绍Vue3中的基础路由和动态路由。
Vue 嵌套路由
ChaoChao66666的博客
03-18 298
在上一篇（Vue3 Router（路由）的基本使用_Zhichao_97的博客-CSDN博客）的基础上，希望实现嵌套路由，如下： 1.将vue3Router01>src>index.js改为如下所示： import {createRouter,createWebHashHistory} from 'vue-router' import News from '../components/News.vue' import User from "../components/...
vue3学习(嵌套路由配置)
weixin_48221105的博客
12-14 1934
vue3学习
【Vue3实战】嵌套路由让前端项目结构更清晰
Jacklx888的博客
09-08 936
Hey小伙伴们，今天要跟大家分享的是Vue3中的一个超实用技巧——嵌套路由（Nested Routing）。无论你是Vue的新手还是老手，都一定不能错过这篇指南，因为学会它，你的项目结构将会变得更加清晰有序！
vue3路由——嵌套多级路由
m0_69853343的博客
08-29 1105
1.childen里写的path路径尽量把父级路由也要写出来，routerlink标签to属性也要把父级的路由写出来。2.父级和子代的组件加载方式保持一致，要么全都使用懒加载，要么全部采用头部引入的方式。aobout里嵌套a路由嵌套 a1,a2，a3。about嵌套b路由嵌套b1，b2，b3。三级：橙子、柚子、柠檬......template里的写法：一级。二级：柑橘类水果下的目录。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值