因为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. Android 伤敌一千自损八百之萤石摄像头集成（一）

    最近忙着修改萤石摄像头C3型号开头的设备添加 本来不是很复杂的事情. , 现在我感觉我入魔了 总感觉这是个小人 螺丝口是眼睛 插入SD卡的事鼻子嘴 接信号的事手 怎么看怎么像愤怒的小人 总结,先看一下 ...

  2. GAN网络从入门教程（一）之GAN网络介绍

    GAN网络从入门教程(一)之GAN网络介绍 稍微的开一个新坑,同样也是入门教程(因此教程的内容不会是从入门到精通,而是从入门到入土).主要是为了完成数据挖掘的课程设计,然后就把挖掘榔头挖到了GAN网络 ...

  3. css3动画添加间隔

    因项目需要,需要在元素上实现动画效果,并且需要有动画间隔.坑爹的是animation-delay只有在第一次动画开始的时候才起效. 在网上找了很多方法,最终的方法基本都是改动画规则,比如 @keyfr ...

  4. CSS-界面滚动时不显示滚动条

    设置滚动条的样式: div::-webkit-scrollbar { width: ; }   关于::-webkit-scrollbar ::-webkit-scrollbar CSS伪类选择器影响 ...

  5. day55 js进阶

    目录 引子 一.BOM操作 1 window对象 2 window子对象 3 history对象 4 location对象(掌握) 5 弹出框 6 计时器相关 二.DOM操作 1 查找标签 1.1 直 ...

  6. mui div滚动阻止触发下拉刷新

    function orderListScroll () { var _orderObj = document.querySelector('.circulation-loan-list') //div ...

  7. 数据可视化基础专题（八）：Pandas基础（七） 数据清洗与预处理相关

    1.数据概览 第一步当然是把缺失的数据找出来, Pandas 找缺失数据可以使用 info() 这个方法(这里选用的数据源还是前面一篇文章所使用的 Excel ,小编这里简单的随机删除掉几个数据) i ...

  8. redis（七)：Redis 字符串(String)（python）

    # -*- coding: utf-8 -*- import redis #这个redis不能用,请根据自己的需要修改 r =redis.Redis(host="123.516.74.190 ...

  9. com.aliyun.openservices.shade.com.alibaba.fastjson.JSONException: exepct '[', but {, pos 1, line 1, column 2

    报错原因:你放的是一个非List的对象 却想取一个List对象出来 package test; import java.text.SimpleDateFormat; import java.util. ...

  10. 记一次webpack打包的问题

    记一次webpack打包的问题 在webpack打包中开启了webpack-bundle-analyzer,发现了一个chunk:tinymce  在整个项目中查找,只有一个未被使用的组件中有如下代 ...