因为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. IdentityServer4 4.x版本 配置Scope的正确姿势

    前言 IdentityServer4 是为ASP.NET Core系列量身打造的一款基于 OpenID Connect 和 OAuth 2.0 认证的框架 IdentityServer4官方文档:ht ...

  2. 每日一题 - 剑指 Offer 54. 二叉搜索树的第k大节点

    题目信息 时间: 2019-07-04 题目链接:Leetcode tag:二叉搜索树 中序遍历 递归 难易程度:中等 题目描述: 给定一棵二叉搜索树,请找出其中第k大的节点. 示例1: 输入: ro ...

  3. How many ways??，题解

    题目: 题意: 找过k条边的路径个数. 分析: 首先注意一下题意,同一个点过两次算两次,做过类似的,过k条边的最短路,只要搞一个矩阵,然后快速幂就好了,这个也一样,维护信息变一下,然后就好了. 如果k ...

  4. 蒲公英 · JELLY技术周刊 Vol.13 跟 VSCode 学习如何开发大型 IDE 项目

    开发一个 IDE 很难么?这或许是件很难的事情,但当我们参考 VSCode 的技术构架来看,整个开发流程就会平滑顺畅很多,从内核开发.代码编辑器.视图结构到插件系统,在这整个技术构架中我们可以看到很多 ...

  5. 005.Nginx配置下载站点

    一 下载站点 1.1 下载站点配置 语法:autoindex on | off; 默认值:autoindex off; 配置段:http,server,location Nginx默认不允许列出整个目 ...

  6. CCNA-Part5 - 传输层 ，TCP 为什么是三次握手？

    传输层 传输层主要的作用就是建立端到端的连接.比如电脑的微信的通信,就需要跨越多个网络设备(交换机和录取)再和微信的服务器建立连接. 传输层需要具有以下的特点: 会话的多复用:如电脑上开启的多个应用, ...

  7. 三种存储方式DAS、NAS、SAN

    ------------恢复内容开始------------ 一.DAS.NAS.SAN在存储领域的位置 随着主机.磁盘.网络等技术的发展,数据存储的方式和架构也在一直不停改变,本文主要介绍目前主流的 ...

  8. 从 (a==1&&a==2&&a==3) 成立中看javascript的隐式类型转换

    下面代码中 a 在什么情况下会打印 1? var a = ?; if(a == 1 && a == 2 && a == 3){ console.log(1); } 这个 ...

  9. java 面向对象（三十四）：泛型三 自定义泛型类、泛型接口、泛型方法

    1.举例: [Order.java] public class Order<T> { String orderName; int orderId; //类的内部结构就可以使用类的泛型 T ...

  10. 数据分析05 /pandas的高级操作

    数据分析05 /pandas的高级操作 目录 数据分析05 /pandas的高级操作 1. 替换操作 2. 映射操作 3. 运算工具 4. 映射索引 / 更改之前索引 5. 排序实现的随机抽样/打乱表 ...