vue 开发微信商城项目,
需求如下:

  1. 购物车页面跳转到详情页,购物车页面包含了多个组件,点击结算跳转到订单页面,从订单返回时,购物车页面没有刷新,由于购物车组件之间通过bus实现事件传递,页面跳转(非物理返回)无法触发beforeDestroy方法,则无法再此方法中销毁bus方法
  1. beforeDestroy() {
  2. this.$root.Bus.$off('judge')
  3. this.$root.Bus.$off('refreshDetail')
  4. this.$root.Bus.$off('clearAll')
  5. this.$root.Bus.$off('upDataCart')
  6. },

无奈,通过beforeRouteLeave来销毁

  1. beforeRouteLeave(to, from, next) {
  2. this.$root.Bus.$off('judge')
  3. this.$root.Bus.$off('refreshDetail')
  4. this.$root.Bus.$off('clearAll')
  5. this.$root.Bus.$off('upDataCart')
  6. next()
  7. },

同样的,物理返回时无法触发购物车的created方法,则无法触发bus的$on方法
归根结底,物理返回时刷新页面则可以处理此问题
思路一

  1. beforeRouteEnter(to, from, next) {
  2. next(()=>{
  3. window.location.reload()
  4. })
  5. },

此方法理论貌似可行,但是页面会狂刷不止,
最后采用了思路二,貌似是一个很low的方法,但是解决了实际问题

  1. this.$router.replace({ name: 'cart' })// 处理返回刷新问题
  2. this.$router.push({
  3. path: '/order/order_sure',
  4. query: {
  5. sku: sku_str,
  6. cart: 'cart'
  7. }
  8. })

页面跳转前先通过路由replace到当前页,再跳转到订单页面,返回可以自动刷新了,
这个方法并不理想,如果您有更好的方法,欢迎分享


有专门的方法处理此问题,在购物车页面,添加如下代码即可

  1. // 销毁组件,返回刷新
  2. deactivated() {
  3. this.$destroy()
  4. },

原文地址:https://segmentfault.com/a/1190000012962470

vue通过路由实现页面刷新的更多相关文章

  1. vue 缓存的keepalive页面刷新数据

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认 ...

  2. vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决

    一.vue 在nginx下页面刷新出现404 在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是 ...

  3. vue react 路由history模式刷新404问题解决方案

    vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...

  4. Vue实现远程获取路由与页面刷新导致404错误的解决

    一.背景 先简单介绍一下现在项目情况:前后端分离,后端服务是Java写的,前端是Vue+ElementUI. 最近的一个需求是:通过后端Api去获取前端路由表,原因是每个登录角色对应的前端路由表可能是 ...

  5. vue项目,子页面刷新404问题

    翻车事故分析: 因需对项目整体优化,调整过程,采用了路由的history模式,本地项目运行,刷新子页面都是OK的. 部署到测试服务器,正常跳转都ok,但刷新子页面就会出现404,请求变成了get,没有 ...

  6. angular配置路由/子页面+vue配置路由/子页面

    1.在vue.js中组件可以复用,然后最近配置了几个子页面 在 这个文件中配置路由,子页面的配置跟其他一样,只不过path不同.   routes: [     { path: '/',       ...

  7. vue自动路由-单页面项目(非build时构建)

    博客中自动路由的原理? 答:简单点说,就是在请求页面时,根据url进行动态添加路由. 与其它自动路由博客的区别? 目前网上的博客,一般都是在build的时候进行动态路由添加,而本博客,采用的是在获得u ...

  8. vue数据变化后页面刷新

    在测试methods和conputed区别的时候,我在methods方法体内增加了一个vue数据自增语句,类似于this.abc++;导致整个页面无法加载出来. 原因是this.abc改变 会触发页面 ...

  9. 关于angular2跳路由防止页面刷新的做法(Angular2路由重载)

    simpleReuseStrategy.ts // 创建重用策略 import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStr ...

随机推荐

  1. Zookeeper分布式锁解决方案具体代码

    定义一个公共资源订单生成类: package com.itmayiedu.lock; import java.text.SimpleDateFormat; import java.util.Date; ...

  2. JAVA学习之枚举

    1.新建一个枚举类 public enum Apple{ FUJI, PIPPIN, GRANNY_SMITH } 通过查看字节码,可以看到,枚举类的实现方式: 1)继承自java.lang.Enum ...

  3. jsp js action之间传值

    1.struts2 action如何向JSP的JS函数传值 action中定义变量 public class TestAction extends ActionSupport implements S ...

  4. ActiveMQ 发送和接收消息

    一.添加 jar 包 <dependency> <groupId>org.apache.activemq</groupId> <artifactId>a ...

  5. bat执行bat文件

    目的:在服务器桌面创建一个bat文件执行tomcat下的startup.bat文件,这样就不用每次都去文件夹下找startup.bat文件 桌面bat文件内容: @echo off start D:\ ...

  6. 设置utf8编码问题

    注意:乱码和request的具体实现类有关,现在已经查到的是RequestDispatcher.forward调用前使用的是org.apache.catalina.connector.RequestF ...

  7. 【翻译自mos文章】怎么startup/shutdown PDB?

    怎么startup/shutdown PDB? 来源于: 12c: How to Startup/Shutdown PDB's? (文档 ID 1592247.1) 适用于: Oracle Datab ...

  8. 略微复杂的sql逻辑(从数据库逆序查找有限条记录(limit))并按相反顺序输出

    项目中有一个业务需求是:默认载入15条历史记录(按时间顺序从早到晚). 以下是我构造的sql逻辑,mark一下,亲測可行. SELECT * FROM (SELECT *FROM group_chat ...

  9. [C#] 怎样分析stackoverflow等clr错误

    有时候由于无限递归调用等代码错误,w3wp.exe会报错退出.原因是clr.exe出错了. 这样的错误比較难分析,由于C#代码抓不住StackOverflowException等异常. 处理方法是:生 ...

  10. 【opencv】opencv在vs下的配置(持续更新)

    经常使用配置记录,会更新下去. 1.去掉ipch及.sdf文件 opencv在vs编译会得到很多文件.当中.dsf和ipch文件就有几十M.总是非常占空间,而这都是用来保存C++预编译的头文件和Int ...