对于router-view的用法

最新推荐文章于 2025-06-19 23:49:39 发布
最新推荐文章于 2025-06-19 23:49:39 发布
阅读量1.6k 收藏 2
点赞数
CC 4.0 BY-SA版权
文章标签： vue vue-router vue-cli
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40984292/article/details/89239214
本文详细解析了在Vue.js应用中，如何通过嵌套的<router-view>组件实现页面间的路由跳转与组件传递。阐述了一层路径对应一个<router-view>的原理，以及如何在多层路径下正确加载目标组件。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在app.vue主组件中有<router-view/>，然后在其他组件也有<router-view/>，它是怎么传递的。原理是什么?

正常写法中，一层路径(/xxx)对应一个router-view，比如url: /a/b/c (假设a、b、c都为正常路径，不会作为参数)

  • /a对应的就是App.vue中的router-view，/a进入a.vue中
  • /a/b对应的就是a.vue中的router-view，/a/b进入b.vue中

可以参考官方文档 https://github.com/vuejs/vue-router/blob/1.0/docs/zh-cn/nested.md

Missing___
关注
Vue 56 ，若依添加router-view，使用详细（若依后台管理系统添加router-view）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
07-14 7443
⭐若依后台管理系统是一款基于 Spring Boot、Spring Security、JWT 以及 Vue 和Element UI构建的企业级解决方案，广泛适用于企业网站、电子商务平台及移动应用等多种场景。凭借其出色的性能和优秀的用户体验，若依在GitHub和Gitee上赢得了大量开发者的青睐，积累了数几十K的星标。作为一个开源项目，若依允许用户免费使用，但同时也要求遵循相应的开源协议。这里，我们分享如何在若依系统中添加 路由坑位，以实现更灵活的页面布局与导航功能。
Vue-Router 原理实现
codewhy的博客
08-20 877
文章目录一、Vue-Router 需要实现的功能如下1、vue插件：2、实例对象router和route3、两个组件 router-view和router-link4、动态路由5、路由传参6、嵌套路由7、编程式导航二、Hash 模式 和 History 模式1、Hash 模式 和 History 模式 的区别：表现形式的区别：原理的区别：2、History 模式三、模拟实现 Vue Router1、Vue 前置知识：2、Vue Router 实现原理Hash 模式：History 模式：3、Vue Rout
vue中＜router-view＞使用详解
weixin_45266691的博客
01-09 9593
是 Vue Router 提供的一个用于动态显示匹配到的组件内容的组件。在单页面应用中，页面的切换是通过路由的变化来实现的，而。属性，从而支持命名视图，这在同时展示多个视图的情况下很有用。可以嵌套使用，以支持嵌套路由的场景。是实现动态路由渲染的核心组件，通过合理配置路由和使用。标签，它会根据当前路由的匹配情况动态渲染对应的组件。在上述例子中，路由切换时会产生淡入淡出的过渡效果。负责根据当前路由匹配到的组件渲染相应的内容。标签，每个标签对应一个具体的嵌套路由。在路由配置中，对应的路由定义也需要添加。
＜router-view＞＜/router-view＞展示当前路径对应的组件
最新发布
m0_57841843的博客
06-19 709
登录
Vue ＜router-view＞用法
weixin_41387874的博客
05-26 5861
Vue <router-view>用法 <router-view>有什么作用 <router-view>一般用于路由管理。当我们需要对页面进行局部刷新的时候，就可以使用<router-view>。 <router-view>具体使用场景 例如，我们创建了一个侧边导航栏，并且需要使用侧边导航栏对主页面内容进行切换，主页面切换的时候保持侧边导航栏不变。（类似于掘金签到页面）。 <router-view>使用方法 主
router-view 使用
lileLife的博客
12-19 2078
最近用vue写网页，竟然忘了router-view 的使用，时间太久了，还是记录下。 <router-view /> 是一个组件，它与router中的path相关联。可以通过router进而改变<router-view>代表的具体vue页面。 比如在'/Root'对应的页面中使用<router-view>，就需要在router.js中配置Root下 chil...
router-view的使用
after_17的博客
02-23 7347
目录 序言 在开发中，我们常需根据导航栏跳转到新页面，但是只需替换内容区域，其余保留不变。这就涉及到子路由的使用，router-view可以实现以上需求。 router-view是一个路由占位符，会自动根据路由的配置（index.js）自动匹配组件，展示在页面的router-view中。 index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import H
vue实现同一个页面可以有多个router-view的方法
10-17
在Vue中，实现同一个页面多个router-view的方法主要涉及到Vue Router的嵌套路由配置。Vue Router是Vue.js官方的路由管理器，它和Vue.js的深度集成，使得构建单页面应用变得非常容易。通过嵌套路由，可以将一个页面...
vue-router 中router-view不能渲染的解决方法
08-30
Vue Router 中 Router-View 不能渲染的解决方法 Vue Router 是一个基于 Vue.js 的官方路由管理器，它提供了一个灵活且强大的路由系统，可以帮助开发者快速构建单页面应用程序（SPA）。然而，在使用 Vue Router 时，...
vue-router-view-transition:使用scrollBehavior正确地进行超时转换
03-10
vue-router-view-transition 与scrollBehavior兼容的路由器视图的过渡包装器 安装 npm install vue-router-view-transition # or yarn add vue-router-view-transition 用法 该库导出一个组件和一个函数。 您需要...
vue中的router-view组件的使用教程
10-17
本文将详细介绍Vue Router中的`<router-view>`组件的使用方法。 `<router-view>`组件是Vue Router的核心组件之一，它在Vue应用程序中充当了一个占位符，用于动态渲染匹配到的路由组件。当我们配置好路由规则后，`...
vue使用路由router-view
HYNN12的博客
03-21 7876
vue router router-view
vue之router-view组件的使用
weixin_30511039的博客
08-16 164
开发的时候有时候会遇到一种情况，比如 ：点击这个链接跳转到其他组件的情况，通常会跳转到新的页面，蛋是，我们不想跳转到新页面，只在当前页面切换着显示，那么就要涉及到路由的嵌套了，也可以说是子路由的使用。 以饿了么订餐的情景来说吧，在同个页面，切换显示不同组件的相应内容，同时地址栏的地址是会变的 怎么实现它呢？ 　　首先我们在导航组件navbar.vue中写了三个导航链接，...
Vue路由的使用
weixin_74090771的博客
03-09 2562
该文章着重讲解了Vue路由的使用
Router-view
热门推荐
qq_59076775的博客
05-11 5万+
我们都知道，路由指的是组件和路径的一种映射关系。Router-view也被称为路由的出口,今天我们就探讨下如何去使用路由出口。 也就是: 路径--------------------------------------------------------------->页面 可以把router-view理解成一类代码存放的位置。 一.基本的路由配置(没用子集) 我们都知道所有的组成注册最终在app.vue注册完毕。 通过代码来分析: import Vue from 'vue' im
router-view
fengkaiyan_99的博客
09-07 463
在一个component中，切换页面不会触发created、mouted，只要在中绑定key属性，切换页面是就会重新加载。 钩子函数：created、mouted
vue源码学习---vueRouter原理 ------ router-view 原理
qq_43631129的博客
02-28 1462
vue源码学习---vueRouter原理 ------ router-view 原理
【vue-router】router-view
七十多岁的人了、
10-30 3008
router-view
router-view的解释
pon的博客
04-19 399
router-view用法
02-10
### Vue.js 中 `router-view` 组件的使用 在 Vue.js 应用程序中，`<router-view>` 是一个非常重要的组件。它用于渲染当前激活路由所对应的组件[^1]。 #### 基本概念 当应用程序中的 URL 发生变化时，Vue Router 会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值