Vue项目路由刷新的实现代码

当vue单页面需要替换参数并刷新页面时，这个时候使用this.$router.push或this.$router.replace会发现路由改变了，但是页面上的数据并没有实时刷新。在网上找到了以下几种方法，亲测可用：

this.$router.go(0)

在具体页面中，先通过this.$router.push或this.$router.replace替换路由，随后调用this.$router.go(0)，页面就会强制刷新，但是该强制刷新与F5刷新效果类似，页面会有空白时间，体验感不好；

provide/inject

首先在app.vue页面中增加如下配置：

<template>
 <div id="app">
  <router-view v-if="isRouterAlive" />
 </div>
</template>

<script>
export default {
 name: 'App',
 data() {
  return {
   isRouterAlive: true
  }
 },
 provide() {
  return {
   reload: this.reload
  }
 },
 methods: {
  reload() {
   this.isRouterAlive = false
   this.$nextTick(() => {
    this.isRouterAlive = true
   })
  }
 }
}
</script>

然后在具体页面中加上inject配置，具体如下：

 export default {
  name: 'orderAndRandom',

  // 就是下面这行
  inject: ['reload'],
  data() {},

  // 省略
 }

加上配置后，在调用this.$router.push或this.$router.replace替换路由后，再新增this.reload()就可以实现页面内数据刷新。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue 路由变化页面数据不刷新的问题

    每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击 按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入

  • vue通过路由实现页面刷新的方法

    vue 开发微信商城项目, 需求如下: 购物车页面跳转到详情页,购物车页面包含了多个组件,点击结算跳转到订单页面,从订单返回时,购物车页面没有刷新,由于购物车组件之间通过bus实现事件传递,页面跳转(非物理返回)无法触发beforeDestroy方法,则无法再此方法中销毁bus方法 beforeDestroy() { this.$root.Bus.$off('judge') this.$root.Bus.$off('refreshDetail') this.$root.Bus.$off('cle

  • vue-router路由参数刷新消失的问题解决方法

    场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并在主页显示数据.但是刷新页面后,数据就消失了. 解决方案: 1.session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页数据,并通过响应头将sessionid传给浏览器并生成相应的cookie文件.这样下次请求页面时,浏览

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

    一.背景 先简单介绍一下现在项目情况:前后端分离,后端服务是Java写的,前端是Vue+ElementUI. 最近的一个需求是:通过后端Api去获取前端路由表,原因是每个登录角色对应的前端路由表可能是不一样的(权限问题) 二.遇到的问题 因为前端Vue+ElementUI项目是单页应用--即只有一个index.html页面,如果路由从远程获取的话,每次F5或点击刷新按钮刷新页面的时候,就会找不到对应的路径而报404错误 三.解决方案 1.通过api远程获取路由,然后在前端生成对应路由 /* 将

  • 详解解决Vue相同路由参数不同不会刷新的问题

    通常情况下我们喜欢设置keepAlive 包裹 router-view <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> 同时在created 中触发请求,在路由参数不同的情况下并不会执行对应的操作. 解决方法: 1.给 router-view 设置 key 属性为路由的完整路径 <keep-alive&g

  • vue 刷新之后 嵌套路由不变 重新渲染页面的方法

    解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 2.写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法 这是条件渲染变化了为false 在修改数据之后使用 $nextTick, 条件渲染变化了为true 则可以在回调中获取更新后的 DOM 如果需要带有查询参数,可以用编程试导航,query来传参,但是这种方式可能刷新之后会有问题. 我的解决方法是在刷新之后点击页面

  • 浅谈针对Vue相同路由不同参数的刷新问题

    在使用vue和vue-router开发spa应用时,我们会遇到这样一种问题. 当页面跳转时,组件本身并没有发生改变: // 路由映射关系'/form/:type' // 当前页面路由/form/shop1 this.$router.push({ name: 'form', params: { type: 'shop2' }) 这时我们进行路由跳转后会发现组件并没有刷新,在前一个路由组件的数据都保留了下来,这并不是我们想要的效果. 对于简单的数据更新,我们可以直接监听路由参数并重新获取路由的初始化

  • Vue项目路由刷新的实现代码

    当vue单页面需要替换参数并刷新页面时,这个时候使用this.$router.push或this.$router.replace会发现路由改变了,但是页面上的数据并没有实时刷新.在网上找到了以下几种方法,亲测可用: this.$router.go(0) 在具体页面中,先通过this.$router.push或this.$router.replace替换路由,随后调用this.$router.go(0),页面就会强制刷新,但是该强制刷新与F5刷新效果类似,页面会有空白时间,体验感不好: provi

  • 实例详解Vue项目使用eslint + prettier规范代码风格

    团队开发的项目,如果没有对代码风格作要求,有多少团队成员,就当然会出现多少种不同的代码风格.因此,我们需要一种能够统一团队代码风格的工具,作为强制性的规范,统一整个项目的代码风格. 幸好,我们有 eslint 和 prettier . eslint VS prettier 应该大多数项目都已经采用eslint来对代码进行质量检查,可能少部分还会采用其进行一定程度上的统一风格.那为什么还需要prettier呢?我们先来对它们作一个简单的了解. 各种linters 总体来说,linters有两种能力

  • 解决vue项目F5刷新mounted里的函数不执行问题

    项目背景 在主文件index.vue中初始化页面相关的操作, 在mounted中放置用户权限判断并更新store中的权限值,当点击相应组件时mounted可正常工作, 但是在用户手动刷新时mounted内的函数并未执行,导致相应组件未获取到权限而显示异常 问题解决 首先,这跟vue生命周期有关,图就不贴了,直接说原因. 当用户f5刷新页面时,整个页面会重新去请求,js的状态变量消失,但是el节点并未重新建立. 因为,mounted是el被新创建的vm.$el替换,并挂载到实例上去之后调用的钩子,

  • Vue项目中引入ESLint校验代码避免代码错误

    Vue项目中引入ESLint校验代码避免代码错误

    目录 1 ESLint 是什么 2 在 Vue 项目中引入 ESLint 2.1 引入 ESLint 2.2 ESLint 配置 2.3 执行 ESLint 代码检查 2.4 自动修复 ESLint 问题 3 配置 husky 和 PR 门禁 3.1 配置 husky 门禁 3.2 配置 PR 门禁 4 常见的 ESLint 问题及修复案例 4.1 案例1: 4.2 案例2: 4.3 案例3: 4.4 案例4: 5 感谢 1 ESLint 是什么 ESLint 是一个插件式的 JavaScrip

  • Vue项目中ESlint规范示例代码

    前言 eslint是一种代码风格管理的工具,可以制定一些代码编写规范,在vue项目中经常用到,本文就给大家分享了开发项目中使用的eslint校验规范,供参考: 示例代码 module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, es6: true, }, extends: ['plugin:vue

  • vue项目如何刷新当前页面的方法

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue: 声明reload方法,控制r

  • vue history模式刷新404原因及解决方法

    目录 项目场景: 问题描述 原因分析: 第一步 第二步 总结 项目场景: 提示:这里简述项目相关背景: vue项目路由history模式 问题描述 提示:这里描述项目中遇到的问题: vue history模式刷新404原因 原因分析: 因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404 解决方案

  • vue项目部署到Apache服务器中遇到的问题解决

    最近刚重构完,我们的一个项目,由原来的jsp模式改为了前后端分离,前端选型为vue,开发完成之后第一件时间就是要部署测试,服务端选的是Apache.本来以为很简单的一件事情,几经坎坷部署了两天才算能够正常访问了.先记录如下, 过程搭建Apache环境,vue项目build之后把生成的dist文件放到,Apache下面,启动Apache之后本以为能够正常访问了, 前提说下:vue项目路由model:history ,默认不会出现下面的问题,因为个人感觉项目路径中带个#实在难受 但是发现错误如下:

  • vue项目页面的打印和下载PDF加loading效果的实现(加水印)

    目录 vue页面的打印和下载PDF(加水印) vue项目页面的打印 vue项目页面下载PDF 封装异步PDF下载函数并添加loading效果 总结 vue页面的打印和下载PDF(加水印) vue项目页面的打印 打印的不用说,调用 window.print() 的方法即可: 注意点:如果用到背景图的话,需要CSS中添加设置: // 标签看哪些地方用到背景图就加哪些,不然调打印机会把背景图隐藏掉 div { // webkit 为Google Chrome Safari 等浏览器内核 -webkit

  • Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解

    目录 路由的拆分 VUEX模块拆分 Element UI库按需加载的优雅写法 路由的拆分 项目较大路由较多时,路由拆分是一个不错的代码优化方案,按不同业务分为多个模块,结构清晰便于统一管理. require.context() 是webpack提供的语法, 相当于前端的读写文件,返回的 files是一个函数,files.keys()执行,返回获取到的文件名(是一个数组),再通过files(keys)获取到模块,取到default 属性,拿到真正的导出对象. /router/home.router

随机推荐