Vue 刷新当前路由的实现代码

2024-09-27 10:53:12

前言

开发项目的时候突然接到了这个需求，实验过后，解决方法也蛮多种，下面就讲下常规的几种方案

1.改变router-view中的key值

通过改变 router-view 中的 key 值，来达到刷新组件的目的

<router-view :key="activeDate"></router-view>

this.activeDate = new Date()

2.给 router-view 标签添加 v-if

通过 $nextTick() ，协助实现。先把 <router-view /> 移除，移除后再重新添加，达到刷新当前页面的功能。

<router-link :to="url" @click.native="refresh">页面1</router-link>
<router-view v-if="flag"/>

<script>
export default {
  data () {
    return {
      flag: true
    }
  },
  methods: {
   refresh() {
     this.flag= false // 通过v-if移除router-view节点
     this.$nextTick(() => {
       this.flag= true // DOM更新后再通过v-if添加router-view节点
     })
    }
  }
}
</script>

3.新建空白页,也是种不错的方案

refresh.vue //新建页面
<script>
  export default {
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.$router.replace(from.path)
      })
    }
  }
</script>

demo.vue //然后在需要的页面调用
this.$router.replace({
   path: '/refresh',
   query: {
     t: Date.now()
    }
})

4.query传值 watch监听页面$route变化然后更新

5.provide / inject 组合

6.取巧的办法 <router-view ref="chartView"></router-view>

定义ref,然后调用相对应的方法，最好给每个页面都提供相同的方法

this.$refs.chartView.refresh()

就解决了点击当前路由没有刷新的问题

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

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

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

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

每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入
详解解决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单页面需要替换参数并刷新页面时,这个时候使用this.$router.push或this.$router.replace会发现路由改变了,但是页面上的数据并没有实时刷新.在网上找到了以下几种方法,亲测可用: this.$router.go(0) 在具体页面中,先通过this.$router.push或this.$router.replace替换路由,随后调用this.$router.go(0),页面就会强制刷新,但是该强制刷新与F5刷新效果类似,页面会有空白时间,体验感不好: provi
Vue 刷新当前路由的实现代码

前言开发项目的时候突然接到了这个需求,实验过后,解决方法也蛮多种,下面就讲下常规的几种方案 1.改变router-view中的key值通过改变 router-view 中的 key 值,来达到刷新组件的目的 <router-view :key="activeDate"></router-view> this.activeDate = new Date() 2.给 router-view 标签添加 v-if 通过 $nextTick() ,协助实现.先把 &l
Vue三层嵌套路由的示例代码

Vue嵌套路由: 实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区域里的内容,切换时不重复渲染): Demo访问时路径:http://IP:端口/#/routers/ 1.建立案例文件夹 page/routers/ 1 routers/index.vue <template> <div> <router-link :to="{name: 'rindex_rhome'}" class="rlink&
Vue 动态设置路由参数的案例分析

在vue中可以动态设置路由参数: 1.使用this.$router.go(),与js histroy.go() 用法一直,前进1,后退-1,当前页面:0 注意使用go时必须是已经有访问历史记录了案例: <template> <div> <button @click="goht">后退<button> <br/> <button @click="goqj">前进<button>
vue router动态路由下让每个子路由都是独立组件的解决方案

vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后,我就这样写了: this.$router.push({path:'manage', query: {id: 'tasklist'}})1 结果很明显,失败了.然后我就默默的再次看了一下官网,结果发现了这句话 // 命名的路由 r
vue移动端路由切换实例分析

在写移动端时,因为需要给页面做转场动画,便有了这次的研究其中最主要的时以下两个问题: 浏览器导航栏的切换 IOS 上滑动切换时,会有两次页面的转场动画,一次自身滑动时进行的切换,随后触发我们设置的转场动画. 除了上面两个问题,其余的操作都是可以在页面内进行设置,基本都是可控的.主要就是解决上面两个问题. 可以看下实际写出来的效果:在线DEMO 1. 浏览器导航栏的切换通过记录历史记录来比较判断前进还是后退如下例子 A页面 -> B页面 -> C页面假如我从 A页面到 B页面再到C
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作

废话不说,上代码! <a-menu theme="dark" mode="inline" :selectedKeys="[$route.path]"> <a-menu-item :key="'/home'"> <router-link to="home"> <a-icon type="user" /> <span>nav 1&l
vue.js通过路由实现经典的三栏布局实例代码

经典的三栏布局效果图如下: 三栏布局 •将布局的各个区块定义成组件 <template id="header"> <div class="header bg-primary text-center"> <h3>头部区域</h3> </div> </template> <template id="left"> <div class="left bg-
Vue中的组件及路由使用实例代码详解

1.组件是什么组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用全局组件 <body> <div id="app">  <myzujian></myzujian> </div> </body> <script>
vue 基于abstract 路由模式实现页面内嵌的示例代码

abstract 路由模式 abstract 是vue路由中的第三种模式,本身是用来在不支持浏览器API的环境中,充当fallback,而不论是hash还是history模式都会对浏览器上的url产生作用,本文要实现的功能就是在已存在的路由页面中内嵌其他的路由页面,而保持在浏览器当中依旧显示当前页面的路由path,这就利用到了abstract这种与浏览器分离的路由模式. 路由示例 export const routes = [ { path: "/", redirect: "

Vue 刷新当前路由的实现代码

相关推荐

随机推荐