vue多个路由复用同一个组件的跳转问题(this.router.push)
因为router-view传参问题无法解决,比较麻烦。
所以我采取的是@click+this.router.push来跳转
但是现在的问题是跳转后,url改变了,但是页面的数据没有重新渲染,要刷新才可以。
有几种办法,用route.go(0)这种方法虽然可以跳转,但是很不友好,要重新加载,变白。
问了群查了很久,无意中发现一个完美切合的
https://www.jb51.net/article/151984.htm
原理就是通过v-if去销毁再生成一次dom
然后跟着做,首先将app.vue里面修改一下
然后在需要用到的页面用即可
vue多个路由复用同一个组件的跳转问题(this.router.push)的更多相关文章
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
- vue 同一个组件的跳转, 返回时保留原来的下拉位置
1,需求分析 公司的项目有这样一个需求: 同一个list组件,根据传过来的listId渲染成多个页面,每个页面都可以下拉.在返回到不同的list页面时,要保留当时下拉的位置. 说的我自己都有点懵逼了, ...
- vue多个路由使用同一个页面,通过name判断参数,渲染页面数据
项目中,发现有多个页面的数据内容相同,只是请求数据的参数不同,就可以使用同一个组件来渲染 这里的客户列表 / 我负责的 / 我参与的 都使用同一个组件,不同点在请求数据的参数 可以看到,通过钩子函数, ...
- vue: 关于多路由公用模板,导致组件内数组缓存问题
当多个路由复用同一个模板,此时在这几个路由间切换,模板并不会重新挂载.针对这个情况,我们需要在当前逻辑内对路由做监听,在发生变化时更新对应属性,已满足需求. 但是,在实现的过程中会遇到如下情况: 如图 ...
- vue篇之路由详解
一.vue路由传参的几种方式 1.声明式 router-link 父组件:<router-link :to="`/path/${id}`"><router-lin ...
- vue中this.$router.push()路由传值和获取的两种常见方法
1.路由传值 this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...
- vue通过ID(参数)修改URL复用同一个页面(组件)不重新加载的问题
项目中经常会用到同一个页面,结构是相同的,我只是在vue-router中通过添加参数的方式来区分状态,参数可以在页面跳转时带上params,或者query,但是有一个问题,即使我们修改了参数,URL也 ...
- Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
随机推荐
- 112买卖股票的最佳时机II
from typing import List# 这道题和上一题很类似,但有一些不同,每天都可以买入,或者卖出# 那么利润最大化,就是i + 1 天的价格比i天的价格高的时候买入# 然后在i + 1天 ...
- 三.接收并处理请求参数与QueryDict对象
一.get与post请求:重点看传参与接收参数 GET请求与传参 ---->url后面跟上?k1=v1&&k2=v2 POST请求与数据提交 (1)get请求:如直接在浏览 ...
- lodash - slice
稀疏数组和密集数组 稀疏数组 Sparse arrays 一般来说,JavaScript 中的数组都是稀疏数组-它们可以拥有空槽,所谓空槽,指的就是数组的某个位置没有任何值,既不是 undefined ...
- gitlab在k8s上运行的一些优化
由 林坤创建,最终由 林坤修改于七月02,2020 gitlab组件图 gitlab在k8s上占用资源 kubectl top pods -n default | grep git* gitlab-g ...
- 状压DP之集合选数
题目 [HNOI2012]集合选数 <集合论与图论>这门课程有一道作业题,要求同学们求出{1, 2, 3, 4, 5}的所有满足以 下条件的子集:若 x 在该子集中,则 2x 和 3x 不 ...
- 代码文件编码unicode 无标签, 导入vs项目编译不过的问题
很多人经常需要把代码分别在linux.windows上编译.在linux中gcc编译的时候,文件格式为utf-8无bom格式,可是如果将文件拿到windows上,用vs编译的时候,发现各种报错,且都是 ...
- Pop!_OS安装与配置(一):下载安装
Pop!_OS安装过程 0x0 Pop!_OS简介 0x1 下载 0x2 启动盘制作 0x3 重启安装 如何分区 0x4 重启进入Pop!_OS 0x0 Pop!_OS简介 Linux发行版选哪个? ...
- 03 Vue实例成员
Vue实例 1.el:实例 new Vue({ el: '#app' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容 2.data ...
- 汉王JAVA笔试题
汉王JAVA笔试题 1,jsp中动态include与静态include的区别? (1)动态包含总是会检查文件中的变化,适合用于包含动态页面,并且可以带参数. (2)静态包含不会检查所含文件的变化,适用 ...
- 数据可视化之PowerQuery篇(十四)产品关联度分析
https://zhuanlan.zhihu.com/p/64510355 逛超市的时候,面对货架上琳琅满目的商品,你会觉得这些商品的摆放,或者不同品类的货架分布是随机排列的吗,当然不是. 应该都听说 ...