【VUE】router-view显示视图

最新推荐文章于 2023-03-21 17:19:15 发布
最新推荐文章于 2023-03-21 17:19:15 发布
阅读量2.3k 收藏 3
点赞数 3
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42588028/article/details/108313294
版权

router-view

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

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

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

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

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

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

静猫
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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 用法 该库导出一个组件和一个函数。 您需要...
vue2.0 路由不显示router-view的解决方法
11-28
- **未正确引入`vue-router`**：确保已经通过`import VueRouter from 'vue-router'`引入，并且使用`Vue.use(VueRouter)`注册。 - **路由配置错误**：检查`routes`数组中每个路由对象的`path`和`component`是否正确...
vue router 子路由显示父路由页面bug处理
Marin6的博客
12-28 2962
vue router 子路由显示父路由页面bug处理。 1.场景 父路由不需要内容，只是单纯切换children中的子路由。 2.错误代码 父路由绑定了一个大页面的组件，导致切换到子路由地址时，仍然显示父级路由。 3.解决 父路由绑定一个空的router-view，可以通过render直接渲染。 4.总结 a.路由嵌套时，不需要父路由内容仍然要给父路由绑定component，不然不会显示子路由页面。 b.路由嵌套时，不需要父路由内容时，父路由可以绑定空的router-view。通过render渲染一个标
解决vue3父子路由通信问题
xuliqi666的博客
09-09 1567
在vue2中我们知道，父子路由通信其实就是父子组件之间的通信，但是在vue3中有一些小差别，父路由通过ref链去获取子路由的响应式数据和方法是获取不到的，此文章主要解决此问题。
解决vue路由跳转了但界面不显示问题
热门推荐
Charis--Cai
07-18 1万+
没有在父路由加上router-view，加上下面的代码即可。 <!-- 路由匹配到的组件将显示在这里 --> <router-view></router-view>
VUE包含多个router-view解决办法
爱coding的大尾巴的专栏
07-05 9686
如果一个页面有多个router-view，加载时会重复加载接口。解决这个问题，可使用以下方式：1，将router-view加入name属性。 2，路由规则里面加入 components，使router-view加入name属性与页面对应。 3，将JS点击事件对应到路由规则的name属性 这样，每次tab切换加载页面时，只加载对应页面的接口。......
vue tab切换_vue子路由跳转实现tab选项卡
weixin_39887546的博客
12-12 1255
现在很多的后台管理系统都采用tab选项卡的布局，左边是导航栏固定，右边是对应的页面，每次点击左边的导航标题，只有右面的对应页面再进行切换，而vue要做tab选项卡，推荐使用实现a标签的效果，然后使用实现插槽的效果，把对应的页面 "塞" 进去，具体实现看下面的案例：这是tab选项卡的效果，布局就不多说了，主要是{{a.title}}，其中to是指向你要跳转的路径，这是关键，而就是最终其他子...
vue中的router-view组件的使用教程
10-17
本文将详细介绍Vue Router中的`<router-view>`组件的使用方法。 `<router-view>`组件是Vue Router的核心组件之一，它在Vue应用程序中充当了一个占位符，用于动态渲染匹配到的路由组件。当我们配置好路由规则后，`...
在Vue中通过vue-router实现命名视图
01-08
在用vue-router路由处理一些需求的时候 例如 有时需要同时同级展示多个组件 而不是嵌套展示 例如：创建一个布局 有侧导航和主内容两个视图 此时命名视图就派上用场了 在路由对象中 使用components属性 以使一个路径...
vue2 设置router-view默认路径的实例
10-17
Vue2.x版本中，设置`router-view`的默认路径是一个常见的需求，尤其是在构建多页面应用时，我们需要定义一个默认的入口页面，当用户访问应用时自动加载。下面将详细讲解如何在Vue2中设置`router-view`的默认路径。 ...
Vue3.0学习 - 第十六节，Vue3 中router-view警告解决方案vue-router4.0 keep-alive保存当前页面数据的正确写法
csl125的博客
06-10 6872
在学习vue3发现使用router-view竟然警告了什么鬼？ [Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>. Use slot props instead: <router-view v-slot="{ Component }"> <keep-alive> <compon
vue3 路由跳转&router-view
violetta521的博客
05-17 2697
路由跳转 router-link <router-link to="/login">去登陆</router-link> 点击事件跳转 <template> <button @click="goHome">去首页</button> </template> <script> export default{ methods:{ goHome(){ this.$r
vue3 调用router-view下的组件方法
欢迎来到我的小世界
03-03 2496
vue3 调用router-view下的组件方法
vue3子页面创建及使用
m0_64590669的博客
03-02 3366
子页面创建及使用
vue使用路由router-view
HYNN12的博客
03-21 6945
vue router router-view
技术点：vue3 使用 ref 绑定 router-view，想调取某个子路由中的方法来重载数据
Big_YiFeng的博客
12-07 1733
当前有一个页面为父路由页面(/system) 他的子页面是他的两个下级(/system/user /system/auth) 由于搜索框及添加按钮都在父级母版中，现在需要在点击添加按钮或者搜索框搜索时都触发子路由页面对应的方法，如：在tab选中用户列表时，触发子页面内的添加用户方法，tab选中角色权限时，触发子页面的添加角色方法在 /system 中 在 /system/user ， /system/auth中
vue中有多个router-view 时，哪个view 显示你要显示的组件呢
qq_35674193的博客
12-07 3091
1、给router-view取个名字： <router-view name = "view_home"/> 2、在index.js中这样写 export default new Router({ routes: [ { path: '/', redirect: 'HomePage' }, { path: '/Ho...
如何在一个页面使用多个router-view显示不同的内容
秋霜梦红尘的博客
06-29 3352
首先：路由配置如下 routes: [ { path:'/', name:'Home', components:{ default:Home, 'his':History } } ] ] 上面的代码主要是把component变成components，然后default默认显示哪个组件， 其余的多个组件分别起一个名字，然后在要显示的位置加上router-view， 一般有name属性的router-view写在A
Vue3/ Vue3内 Vue-router Vue3路由 完整配置流程
m0_64494670的博客
02-24 2434
Vue3/ Vue3内 Vue-router Vue3路由 完整配置流程
vue router-view
最新发布
05-01
vue里的router-view是一个组件，用于显示和加载已定义的routes。它是vue-router库的一部分，可以让我们在单页应用（SPA）中进行页面路由，而不需要每次都重新加载整个页面。 当我们定义路由时，可以为每个路由指定一个组件，例如： ``` const routes = [ { path: '/home', component: Home }, { path: '/about', component: About } ] ``` 这里定义了两个路由，一个是指向Home组件，另一个是指向About组件。在我们的模板中，使用<router-view>标签，就可以将路由对应的组件嵌入到模板中，例如： ``` <template> <div> <h1>My Awesome App!</h1> <router-view></router-view> </div> </template> ``` 这样当我们访问路径为/home时，就会在<router-view>标签中渲染Home组件，访问路径为/about时，就会渲染About组件。 此外，router-view组件还有一些其他的属性和钩子函数，例如name属性可以用于命名视图，props属性可以将参数传递给路由组件，beforeRouteUpdate和beforeRouteLeave钩子函数可以在路由变化前后执行某些操作。 总之，router-view是在vue-router中非常必要的一个组件，可以让我们方便地进行单页应用开发，实现页面的动态切换和传参等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值