vue同一个组件多个router-view渲染展示后，按钮组件不可用

最新推荐文章于 2023-03-29 12:36:03 发布
最新推荐文章于 2023-03-29 12:36:03 发布
阅读量293 收藏
点赞数
文章标签： vue.js html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Curtain_show01/article/details/120508219
版权

今天在写vue的时候，遇到一个需求，同一个组件下，要同时展示两个rou-view
如下图
在这里插入图片描述

这样写完后，我在页面测试的时候，发现按钮不可用了
在这里插入图片描述
解决方法，放弃el布局，使用传统的div套娃布局，自己写样式，就可以解决

Curtain_show01
关注
路由嵌套（套娃）
qq_41936090的博客
01-04 339
刚刚做了个路由嵌套的练习，先看看效果：   虽然做的很简陋，但是已经可以看出路由嵌套的应用场景了，在当个页面内切换视图，如德芙一般的纵享丝滑。接下来直接放代码：   看代码之前请先说一下这个命名：     菜单一：包含了面板一和面板二     菜单二：包含了面板三和面板四 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嵌套路由</t
vue-router 中router-view不能渲染的解决方法
08-30
Vue Router 中 Router-View 不能渲染的解决方法 Vue Router 是一个基于 Vue.js 的官方路由管理器，它提供了一个灵活且强大的路由系统，可以帮助开发者快速构建单页面应用程序（SPA）。然而，在使用 Vue Router 时，...
多个路由渲染同个组件(.vue)
qq_40788998的博客
04-18 857
VUE组件重用问题 - 两个路由渲染同个组件 问题： 添加或修改时，希望用到同一个页面，添加页面本来不应该有数据，但是显示了修改时重显数据。此时想到最简单的方式在created()中清除数据，但是并不起作用 原因： vue-router导航切换时，如果两个路由都渲染同个组件，组件的生命周期方法（created或者mounted）不会再被调用,组件会被重用，显示上一个路由渲染出来数据 解决方案 可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新触发生命周期方法，确保
关于Vue一个页面中两个Router-view处理
无简介！！
10-18 1456
关于Vue一个页面中两个Router-view处理
关于多个router-view视图组件，渲染同一页面
热门推荐
草巾冒小子的博客
05-11 1万+
vue.js多视图的使用，可以提高网页组件化，模块化 比如使用多视图，可以将网站页面封装header、footer、navbar等公共部分， 遇到修改公共部分的文案信息等数据的时候，不再需要逐一修改每个页面；只需要修改各个不同文件引用的唯一对应的相同视图文件即可完成所有不同页面效果的自动同步更新， 从而更便捷，更省时，更省力地去管理网站的不同部分。 ...
vue 一个页面多个router-view如何配置子路由_vue服务端渲染
weixin_39865440的博客
11-25 1043
一、简介像vue之类的框架都提供了一种动态改变页面的内容，无需每次向服务端发送请求。当开始加载网站时，浏览器收到一堆用来构建页面的代码片段(html、css和其他文件)和如何将这些代码片段组装起来的指令。在浏览器真正显示页面之前，需要花费时间将这些信息拼装起来。那么如果在服务端放一个能构建出随时显示的页面的框架，然后将这个完整页面发送给浏览器是一种什么体验呢？而nuxt.js就是这么一个服务端渲染...
vue实现同一个页面可以有多个router-view的方法
10-17
在Vue项目中，利用Vue Router的嵌套路由功能，可以非常灵活地在同一个页面上根据不同的路由路径展示多个组件内容。通过使用Element UI的<el-tabs>组件作为导航容器，结合<el-tab-pane>和带name属性的<router-view>，...
vue中的router-view组件的使用教程
10-17
`<router-view>`组件是Vue Router的核心组件之一，它在Vue应用程序中充当了一个占位符，用于动态渲染匹配到的路由组件。当我们配置好路由规则后，`<router-view>`会根据当前激活的路由路径来决定渲染哪个组件。 ...
解决vue更新路由router-view复用组件内容不刷新的问题
10-16
在Vue中，router-view是一个容器，它根据当前的路由地址渲染相应的组件。当路由地址发生变化时，如果没有正确地通知Vue需要更新组件，Vue可能会复用之前渲染的组件实例。这会导致组件内部数据不更新的问题，因为组件...
vue实现一个组件内使用多个router-view
nnnooon的博客
01-11 760
vue实现一个组件内使用多个router-view
vue-router中的router-view的困扰
weixin_30925411的博客
07-04 680
刚开始接触vue的时候有很长一段时间被router-view的渲染困扰着，不知道为什么明明有很多router-link和不同的router-view，但是为什么渲染的时候不会出现错乱呢 这是我自己写的一个demo 左侧是一级路由，右边显示的是一级路由对应的组件右边中first中含有二级路由 routes: [ { path: '/', ...
【转载】个人笔记-----Vue中多个router-view应用【如有不对，欢迎指正】
Study_Live_Sun的博客
03-30 256
router-view 不渲染
qq_27681677的博客
03-29 1023
一般做vue项目使用vue-router的时候，会突然发现router-view不渲染，并且没有报错的问题出现，会搞的一头雾水，寻找逻辑，文件命名及引入也没有什么毛病，大概率上就是很小的细节上我们给忽略掉了，以致找不到问题所在，一般情况下，很容易忽视的一个错误是routes写成了routers,另外一个呢，就是component写成了componets.（如上图红框所示的位置。
Vue同一路由多页面数据互相影响(已修复)
weixin_45330738的博客
12-27 2555
Vue同一路由多页面数据互相影响(已修复)
VUE包含多个router-view解决办法
爱coding的大尾巴的专栏
07-05 1万+
如果一个页面有多个router-view，加载时会重复加载接口。解决这个问题，可使用以下方式：1，将router-view加入name属性。 2，路由规则里面加入 components，使router-view加入name属性与页面对应。 3，将JS点击事件对应到路由规则的name属性 这样，每次tab切换加载页面时，只加载对应页面的接口。......
router-view输出无法渲染
qq_44429079的博客
09-23 1530
router-view输出无法渲染问题 一开始觉得还蛮奇怪的，因为查到的方法是检查routes是不是错误写成router，这个错误也会导致无法渲染 后来发现不是： 解决办法：
keep-alive包裹router-view不生效解决方案
往事随风
08-31 2020
要解决的问题：最近使用vue3.0保留组件状态时，发现直接用keep-alive包裹router-view不生效 解决方案：利用插槽的写法可以完美解决 实现思路：组件状态保留不成功，看到浏览器控制台给出了提示信息，替换自己写的代码即可 控制台会给出提示，直接用就行 今天的分享就这些，欢迎大家一起交流，共同成长 ...
vue router-view 组件的使用
疏影横斜水清浅
05-12 2342
router-view 主要是构建 SPA (单页应用) 时，方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的 路由配置完成后, 就要使用 router-view 进行渲染了 (只要有子路由, 就要用它来渲染) <template> <div> <h1>Basic</h1> <ul> <li> <router-link to
vue无法解析组件router-link、router- view
最新发布
09-25
当在Vue项目中遇到`router-link`或`router-view`无法解析的问题，通常涉及到Vue Router的配置或使用问题。这里有几个可能的原因及解决方案： 1. **安装和配置**：首先确认Vue Router已经在项目中正确安装和配置。你...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值