【VUE】router-view显示视图

最新推荐文章于 2025-03-27 19:40:38 发布
最新推荐文章于 2025-03-27 19:40:38 发布
阅读量2.4k 收藏 3
点赞数 3
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42588028/article/details/108313294
版权
本文详细介绍了router-view在Vue路由中用于Tab标签切换的使用场景。通过配置父路由和子路由，无需在父组件中引入子组件，即可实现在不同Tab间展示相应子组件内容的功能。文章阐述了如何仅通过父组件path路径展示父组件，结合子组件路径时则显示子组件的机制。

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

router-view

router-view主要使用场景是在tab标签切换

1.先在路由中配置父路由（引入父组件）和子路由（引入子组件）
在父组件中添加router-view。
对应的子组件会显示在router-view的位置

无需在父组件中引入子组件
2.浏览器中只输入父组件的path路径，router-view的位置不会显示子组件。
如果输入父组件和子组件的路由，那么router-view的位置会显示子组件

路由中的配置在这里插入图片描述

只写父路由
在这里插入图片描述

父路由和子路由都写
在这里插入图片描述

vue3之RouterView插槽和过渡动效
qq_35876316的博客
03-22 1090
【代码】vue3之RouterView插槽和过渡动效。
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 />使用
weixin_30699741的博客
02-14 2329
在APP.vue主组件中，内容上就只有<router-view></router-view>，然后在其他页面也有<router-view></router-view>，可以理解为： 一层路径(/xxx)对应一个router-view 比如url: /a/b/c (假设a、b、c都为正常路径，不会作为参数) 那/a对应的就是App.vue中的...
＜router-view＞有什么用
最新发布
codeFly
03-27 445
<router-view> 是一个占位符组件，它的主要功能是根据当前的路由路径动态渲染对应的组件。在单页面应用中，页面不会像传统多页面应用那样进行整体刷新，而是通过切换不同的组件来实现页面内容的更新，<router-view> 就是用来显示这些动态切换的组件的区域。<router-view> 是 Vue Router 中实现路由切换和组件动态渲染的核心组件，它使得单页面应用能够在不刷新整个页面的情况下，动态显示不同的内容，提升了用户体验。
vue3 路由跳转&router-view
violetta521的博客
05-17 2815
路由跳转 router-link <router-link to="/login">去登陆</router-link> 点击事件跳转 <template> <button @click="goHome">去首页</button> </template> <script> export default{ methods:{ goHome(){ this.$r
解决vue路由跳转了但界面不显示问题
Charis--Cai
07-18 2万+
没有在父路由加上router-view，加上下面的代码即可。 <!-- 路由匹配到的组件将显示在这里 --> <router-view></router-view>
Vue中router-view和子路由的使用方法
如需咨询可联系我，V：chen2318341674
01-29 6701
语法场景：实现一个随着切换tab栏，头部底部不变，中间内容变得功能需求。 首先需要在路由文件中添加子路由（children）： import Vue from 'vue' import Router from 'vue-router' import Home from '../views/Home.vue' import Content1 from '../views/Content1.vue' import Content2 from '../views/Content2.vue' import Cont
vue实现同一个页面可以有多个router-view的方法
10-17
在Vue中实现多个router-view，首先需要在路由配置中定义一个命名视图。命名视图允许你为不同的router-view指定不同的名称，并在模板中使用这些名称来放置对应的组件。这样，就可以在同一个页面上根据路由的不同显示...
vue2.0 路由不显示router-view的解决方法
11-28
- **未正确引入`vue-router`**：确保已经通过`import VueRouter from &#39;vue-router&#39;`引入，并且使用`Vue.use(VueRouter)`注册。 - **路由配置错误**：检查`routes`数组中每个路由对象的`path`和`component`是否正确...
【JavaScript源代码】Vue router-view和router-link的实现原理.docx
12-29
`<router-link>` 和 `<router-view>` 是 Vue Router 提供的两个核心组件，它们协同工作，实现了单页面应用(SPA)中的导航和视图切换。 **1. `<router-link>` 的实现原理** `<router-link>` 是 Vue Router 用于创建...
vue中的router-view组件的使用教程
10-17
本文将详细介绍Vue Router中的`<router-view>`组件的使用方法。 `<router-view>`组件是Vue Router的核心组件之一，它在Vue应用程序中充当了一个占位符，用于动态渲染匹配到的路由组件。当我们配置好路由规则后，`...
vue3 vue-router使用详解
热门推荐
蓑笠翁
06-17 2万+
vue3引入router详解，vue3+typescript使用Vue-Router包详解。
vue中有多个router-view 时，哪个view 显示你要显示的组件呢
qq_35674193的博客
12-07 3234
1、给router-view取个名字： <router-view name = "view_home"/> 2、在index.js中这样写 export default new Router({ routes: [ { path: '/', redirect: 'HomePage' }, { path: '/Ho...
Vue 3路由配置，简单配置
m0_57715356的博客
03-01 1400
现在，你已经成功配置了Vue 3的路由。你可以根据你的需求添加更多的路由和视图组件，以构建一个完整的单页应用程序。你可以在路由配置中定义更多的路径和对应的组件，并在视图组件中编写相应的模板和逻辑。
Vue3：路由
2301_79526467的博客
05-11 1838
1. 路由简介 2. HelloWorld 　 组件准备 　 routers配置 　 main.js引入路由配置文件 3. 编程式路由（useRouter） 4. 路由传参（useRoute） 5. 路由守卫
VUE在代码中动态添加路由以及children属性，router-view动态展示其他子页面
你在此地别动的博客
08-09 8777
export default class testController extends Vue { //设置路由 mounted(): void { //假设数据里有两个画面 const idArray = ['son1', 'son2']; //获取当前router const router: any = this.$router; const routerArray: Array<any> = router.options.routes[0
解决“vue-router子路由默认视图不显示”问题
qq_42381297的博客
09-05 1万+
今天在看Vue学习视频，老师讲解vue-router多级路由的使用，在写完视频里的例子后，自己测试发现一个小问题（当时视频里没有提及），我是用name实现的路由之间的切换，其中一个有子路由，发现子路由的默认显示没有了（第一次默认有，第二次点击就没有了），又发现控制台有警告提示，所以我百度想要解决问题。很幸运很快找到解决方案： 针对vue-router子路由默认视图不显示这个问题，要有默认子路由，...
总算学到路由了————vue3中路由介绍
2301_80412275的博客
09-14 1102
下载vue-router的依赖：npm install vue-router@4创建好路由组件，放在pages/views里面（ 文件夹通常包含应用的页面。这些页面通常是与路由相对应的组件，代表应用的不同视图， 文件夹通常包含可重用的组件。这些组件可以在多个视图中使用，通常是用于构建 UI 的小块）在src下面创建一个router文件夹，新建index.ts或index.js 由于上面index.ts里面的export default router，路由暴露。接着在main.js里面去使用这个rou
Vue 3中的路由（Router）详解
scorpion_V的博客
01-20 1667
关于路由的基本使用以及部分高级使用如前置路由守卫和动态路由。
App.vue中的 <RouterView />容器大小怎么设置
12-12
在Vue.js中，`<RouterView />`是一个用于显示路由组件的容器。要设置`<RouterView />`容器的大小，可以通过多种方式实现，具体取决于你的需求和项目的结构。以下是几种常见的方法： ### 方法一：使用CSS样式 你可以在父组件或全局样式文件中直接为`<RouterView />`设置样式。例如： ```vue <template> <div class="router-view-container"> <RouterView /> </div> </template> <style scoped> .router-view-container { width: 100%; height: 100vh; /* 或者你需要的具体高度 */ /* 其他样式 */ } </style> ``` ### 方法二：使用内联样式 你也可以直接在`<RouterView />`标签上使用内联样式： ```vue <template> <RouterView style="width: 100%; height: 100vh;" /> </template> ``` ### 方法三：使用计算属性或数据属性 如果你需要动态设置容器的大小，可以使用计算属性或数据属性： ```vue <template> <div :style="{ width: containerWidth, height: containerHeight }"> <RouterView /> </div> </template> <script> export default { data() { return { containerWidth: &#39;100%&#39;, containerHeight: &#39;100vh&#39; }; } }; </script> ``` ### 方法四：使用CSS框架 如果你使用了诸如Bootstrap或Tailwind CSS之类的CSS框架，可以通过添加类名来设置样式： ```vue <template> <div class="w-full h-screen"> <RouterView /> </div> </template> ``` ### 总结 根据你的具体需求，可以选择上述方法中的任意一种来设置`<RouterView />`容器的大小。通常，使用CSS样式是最常见和推荐的方式，因为它可以保持代码的整洁和可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值