关于Vue一个页面中两个Router-view处理

最新推荐文章于 2023-10-05 15:24:05 发布
原创 最新推荐文章于 2023-10-05 15:24:05 发布 · 1.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

本文探讨了在Vue应用中，当一个页面需要显示多个Router-view时，如何通过为每个Router-view指定唯一的名字来实现正确地切换和管理组件。通过实例展示了name属性的用法，说明了命名Router-view对于解决多个组件并存场景的重要性。

一个页面中有两个Router-view处理

我们就要给Router-view起名字了

我们先看一下起名字的效果

当name是a的时候  当然就是Left了

所以，以此类推 多个的话   起名字是能够解决的

 

湖边看客
关注
【vue2第十五章】VueRouter 路由配置(VueRouter)与使用 和 router-link与router-view标签使用
weixin_72979483的博客
09-07 2624
Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用（SPA）中实现页面之间的导航和路由功能。它是一种映射关系，映射了页面组件与路径的关系。如何配置VueRouter 1. 下载vue-router因为它是一个单独的模块所以需要下载。 **vue2对应的vue-router版本是 vue-router3.x vue3对应的vue-router版本是 vue-router4.x** 使用npm下载：`npm install vue-router
【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解决办法
爱coding的大尾巴的专栏
07-05 1万+
如果一个页面有多个router-view，加载时会重复加载接口。解决这个问题，可使用以下方式：1，将router-view加入name属性。 2，路由规则里面加入 components，使router-view加入name属性与页面对应。 3，将JS点击事件对应到路由规则的name属性 这样，每次tab切换加载页面时，只加载对应页面的接口。......
在一个页面里我们有2个以上router-view
aliven1的博客
05-17 6045
<router-view ></router-view> <router-view name="left" style="float:left;"></router-view> <router-view name="right" style="float:right;"></router-view> 现在的页面中有了三...
vue同一路由控制不同页面跳转_vue多页面路由相互跳转问题？
weixin_29061531的博客
02-22 3125
由于业务需要，需要使用到多页面，最近在多页面中路由跳转遇到了一个问题：1、有index.html、exchange.html两个模板文件，分别对应两个入口，vue.config.js配置如下//配置多页面入口pages:{index:{entry:'src/main.js',template:'public/index.html',filename:'index.html',title...
一个项目两个router-view
haohaoxueqd的博客
11-04 469
多个router-view
vue实现一个组件内使用多个router-view
nnnooon的博客
01-11 917
vue实现一个组件内使用多个router-view
精选资源
vue实现同一个页面可以有多个router-view的方法
01-19
使用Vue+Element搭建项目的时候，为了避免一个页面过大，将tab里面的内容分成多个页面，并使用同级视图展示 <el v-model=activeName tab-click=handleClick> 用户详情 name=first> <router></router> 用户组 ...
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
10-17
首先，`<keep-alive>`是一个抽象组件，它的主要作用是将被包含的组件保留在内存中，避免在组件切换时销毁和重建。这在处理那些数据量较大、加载时间较长或者用户需要快速返回到之前状态的组件时特别有用。 1. **...
vue中怎么在一个页面中可以有两个router-view
最新发布
12-26
在 Vue.js 项目中，如果希望在一个页面内展示多个视图区域，则可以通过命名视图的方式实现这一需求。对于每一个额外的 `<router-view>` 需要指定名称，并且在路由配置文件里定义这些命名视图对应的组件。 #### 修改...
vue 一个页面多个router-view如何配置子路由_vue-cli3 项目从搭建优化到docker部署
weixin_39877182的博客
12-04 1096
项目地址 vue-cli3-project 欢迎 star 原文地址 https://www.ccode.live/lentoo/list/9?from=art1. 创建一个vue项目 相信大部分人都已经知道怎么创建项目的，可以跳过这一节，看下一节。1.1 安装@vue/cli# 全局安装 vue-cli脚手架 npm install -g @vue/cli等待安装完成后开始下一步1.2 初始化...
【Vue.js】项目中 router-view 可以有几个？
day day up
06-26 5524
在 Vue 项目中，router-view是一个用于渲染路由组件的组件。在一个应用程序中，可以多次使用router-view，以渲染多个不同的路由组件。
vue同一个组件多个router-view渲染展示后，按钮组件不可用
Curtain_show01的博客
09-27 359
今天在写vue的时候，遇到一个需求，同一个组件下，要同时展示两个rou-view 如下图 这样写完后，我在页面测试的时候，发现按钮不可用了 解决方法，放弃el布局，使用传统的div套娃布局，自己写样式，就可以解决 ...
同个路由，多个视图
Kratial的博客
09-02 851
最近对于刚接触的vue学习中遇到这样的问题： 需求：我想在一个后缀为.vue的文件中，导入其他后缀为.vue的文件，即能过实现在同一个路由下，能够显示多个路由/ 问题：总是得不到想要的效果， 有3个待加载的vue文件：HelloWorld.vue ,topBar.vue, footBar.vue 一个主vue文件app.vue 要将三个待加载的都通过app.vue在同一个路径下显示在同一...
vue多个＜router-view＞ 嵌套理解
毅香雪海的博客
05-30 6676
在学习vue的过程中，多次碰到如有跳转错误的问题。我在多级菜单(存在多个<router-view>)中路由跳转多次不符合自己的预期。 经过尝试，终于初步理解多个<router-view>嵌套时，与路由配置的关系。 假设我们有如下路由配置 const routerMenu = [ { name: 'home', path: '/home', component: () => import('@/components/layout/...
同一页面多个router-view路由出口
SEKIRO_DJ的博客
08-22 4179
该页面分别在左中右放置了router-view，想要在同一页面有多个router-view，路由文件要做好相应配置，router-view也要加上name属性 注意：children里的components是带有s的，并且components中的key对应页面中router-view的name属性，key是default则对应无name属性的router-view router/index.ts import Add from '../components/Add.vue' impor...
vue-element-ui-分页用法
东东爱编码博客
07-16 852
文章目录一、element-ui-分页 一、element-ui-分页 官方文档：https://element.eleme.cn/#/zh-CN/component/pagination 场景： 当一个页面中会有多个tab页，每个tab都是一个列表数据，那就存在分页组件。 问题产生： 因为是同一个页面，所以会公用一个分页组件，这就会产生一个问题，点击前一个tab页，点击分页，再点击第二个tab页的时候，分页依旧停留在第一个tab的分页当前页。 解决方案： ​ 重新设置当前页 具体实现方案：
VUE框架使用vue-router实现两层嵌套效果的实现------VUE框架
在经历了无数个黑夜之后，我决定自己成为太阳
10-05 240
VUE框架使用vue-router实现两层嵌套效果的实现------VUE框架
Vue之多个router-view应用
热门推荐
Radom&7
11-08 1万+
在App.vue添加两个router-view，使用name属性指定对象的页面 &lt;template&gt; &lt;div id="root"&gt; &lt;div&gt; &lt;router-link to="/home"&gt;首页 \&lt;/router-link&gt; &lt;router-link to="/
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值