因为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）的更多相关文章

  1. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  2. vue 2.0 路由切换以及组件缓存源代码重点难点分析

    摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...

  3. vue 同一个组件的跳转， 返回时保留原来的下拉位置

    1,需求分析 公司的项目有这样一个需求: 同一个list组件,根据传过来的listId渲染成多个页面,每个页面都可以下拉.在返回到不同的list页面时,要保留当时下拉的位置. 说的我自己都有点懵逼了, ...

  4. vue多个路由使用同一个页面,通过name判断参数,渲染页面数据

    项目中,发现有多个页面的数据内容相同,只是请求数据的参数不同,就可以使用同一个组件来渲染 这里的客户列表 / 我负责的 / 我参与的 都使用同一个组件,不同点在请求数据的参数 可以看到,通过钩子函数, ...

  5. vue: 关于多路由公用模板，导致组件内数组缓存问题

    当多个路由复用同一个模板,此时在这几个路由间切换,模板并不会重新挂载.针对这个情况,我们需要在当前逻辑内对路由做监听,在发生变化时更新对应属性,已满足需求. 但是,在实现的过程中会遇到如下情况: 如图 ...

  6. vue篇之路由详解

    一.vue路由传参的几种方式 1.声明式 router-link 父组件:<router-link :to="`/path/${id}`"><router-lin ...

  7. vue中this.$router.push()路由传值和获取的两种常见方法

    1.路由传值   this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...

  8. vue通过ID（参数）修改URL复用同一个页面（组件）不重新加载的问题

    项目中经常会用到同一个页面,结构是相同的,我只是在vue-router中通过添加参数的方式来区分状态,参数可以在页面跳转时带上params,或者query,但是有一个问题,即使我们修改了参数,URL也 ...

  9. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

随机推荐

  1. Nginx 从入门到放弃（二）

    学习完了nginx的基本知识后,我们来了解下nginx的虚拟主机. 说到虚拟主机,那就得说一说虚拟主机的三种方式了 基于端口的虚拟主机 基于域名的虚拟主机 基于ip的虚拟主机 基于端口实现虚拟主机 只 ...

  2. Spring Boot -- Spring AOP原理及简单实现

    一.AOP基本概念 什么是AOP,AOP英语全名就是Aspect oriented programming,字面意思就是面向切面编程.面向切面的编程是对面向对象编程的补充,面向对象的编程核心模块是类, ...

  3. POJ2362贪心

    题意:我们的化学生物学家发明了一种新的叫stripies非常神奇的生命.如果一个质量为m1和m2的stripies相撞,生成的stripies体重是2*sqrt(m1*m2) 现在,科学家们想知道,如 ...

  4. 小程序爬坑（一）之时间格式IOS的兼容

    new Date()传参差异化问题 在安卓系统中,直接传入标准格式字符串,就可以转换为Date格式数据 在苹果系统中不支持ISO-8601标准格式的时间字符串 IOS在使用new Date()创建日期 ...

  5. Report.Net 本地数据库、WebService、Socket报表

    本地.服务器的Access.Sql报表编辑.预览.打印. 可自定义预览界面,可方便嵌入到你的程序中去,提供接口函数,如有需要可自行添加接口. 预览采用单双面方式,因为如果页面过多,预览不能全部加载,所 ...

  6. JavaScript学习 Ⅶ

    十四. DOM(文档对象模型) 节点:Node--构成HTML文档最基本的单元 文档节点:整个HTML文档 元素节点:HTMl文档中的HTML标签 属性节点:元素的属性 文本节点:HTML标签中的文本 ...

  7. 数据可视化之powerBI技巧（一）PowerBI可视化技巧：KPI指标动态展示之TOPN及其他

    ​本文来自星友Beau的分享,在进行数据指标的展现时,对关键的少数单独展示,而对剩余的大多数折叠为其他项,是一个很常用的做法.Beau同学通过一个日常的办公场景,详细介绍了PowerBI实现的步骤,值 ...

  8. 05 flask源码剖析之配置加载

    05 Flask源码之:配置加载 目录 05 Flask源码之:配置加载 1.加载配置文件 2.app.config源码分析 3.from_object源码分析 4. 总结 1.加载配置文件 from ...

  9. 工作3年java面试题整理(自用)

    基础题目 1.Java线程的状态  一. 线程状态类型:1. 新建状态(New):新创建了一个线程对象.2. 就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法.该 ...

  10. Ethical Hacking - GAINING ACCESS(2)

    Server Side Attacks - INFORMATION GATHERING Need an IP address. Very simple if target is on the same ...