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

在使用vue和vue-router开发spa应用时，我们会遇到这样一种问题。

当页面跳转时，组件本身并没有发生改变：

// 路由映射关系'/form/:type'
// 当前页面路由/form/shop1
this.$router.push({ name: 'form', params: { type: 'shop2' })

这时我们进行路由跳转后会发现组件并没有刷新，在前一个路由组件的数据都保留了下来，这并不是我们想要的效果。

对于简单的数据更新，我们可以直接监听路由参数并重新获取路由的初始化数据即可，
但是对于有很多子组件需要初始化或者reset的情况，我们还是有必要重新执行组件的生命周期。

针对这种情况可以使用三种方式解决：

1.为相同路由页面的跳转进行中间路由替换，在router上注册beforeEach全局守卫进行拦截，跳转到一个中间路由（例如empty），再从中间过渡路由跳转至要去的路由。

// 全局导航守卫
router.beforeEach((to, from, next) => {
 if (to.name === from.name && to.params.type !== from.params.type) {
  next({ name: 'empty', query: { toPath: to.fullPath } })
 } else {
  next()
 }
})

// 中间过渡路由
let toPath = this.$route.query.toPath
if (this.toPath) {
 this.$router.push({ path: this.toPath })
}

2.使用v-if重新渲染当前页面组件

// html部分
<div>
 <router-view v-if="showRouterView"/>
</div>

// script部分
export default {
 data () {
  return {
   isRouterAlive: true
  }
 },
 methods: {
  reload () {
   this.showRouterView = false
   this.$nextTick(() => (this.showRouterView = true))
  }
 }
}

这样把方法注册到跟组件上，对于想刷新的组件直接调用reload方法即可。

3.使用vue文档组件绑定的key值来进行强制刷新

vue文档说明了当你需要

  • 完整地触发组件的生命周期钩子
  • 触发过渡

的时候可以利用更新组件绑定的key值来完成更详细的说明

这样直接为组件绑定与路由参数关联的值即可

<MyComponent :key="routeParams" />

综合来看，第三种方式最简单，推荐使用。

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

赞 (0)

相关推荐

  • 详解vuejs几种不同组件（页面）间传值的方式

    在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值. 一.路由传值 路由对象如下图所示: 在跳转页面的时候,在js代码中的操作如下,在标签中使用<router-link>标签 this.$router.push({ name: 'routePage', query/params: { routeParams: params } }) 需要注意的是,实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题. 这样使用起来很方便,但url会

  • 详解解决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跳转同一个组件,参数不同,页面接收值只接收一次的解决方法

    作为vue的初用者,你可能会像我一样遇到一个问题,对跳转组件是,我们想通过参数不同,调用不同的方法. 例如: app.vue <ul> <li class="navList" v-for="index in goods" :key="index.name"> <router-link :to="{path:index.link,query:{type:index.name}}" > {{in

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • vue从一个页面跳转到另一个页面并携带参数的解决方法

    1.需求: 点击商场跳转到商业体列表 解决方案: 元页面: a标签中添加跳转函数 <a class="orderBtn1 sIRicon2" href="javascript:void(0);" rel="external nofollow" @click="toMallInfo('M000989')"><i class="sIRicon"></i>商场</a>

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

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

  • 浅谈angular4.0中路由传递参数、获取参数最nice的写法

    研究ng4的官网,终于找到了我想要的方法.我想要的结果是用'&'拼接参数传送,这样阅读上是最好的. 否则很多'/'的拼接,容易混淆参数和组件名称. 一般我们页面跳转传递参数都是这样的格式: http://angular.io/api?uid=1&username=moon 但是在SPA单页应用中却是下面的结果居多[初级视频都是这样敷衍的] http://angular.io/api/1/moon 那么怎么实现我说的结果呢? 重点开始了. 实现从product页面跳转到product-det

  • 浅谈使用Vue完成移动端apk项目

    浅谈使用Vue完成移动端apk项目

    我们项目使用的是Vue和Vant组件,详情都可以看官网哦 Vant Vue 完整项目视频链接 目录结构: 基本配置 入口文件main.js 首先做一个引入 我们的Vant UI组件是按需引入,而Element UI是全部引入 所以引用方式也不同 main.js完整代码 // 引入Vue import Vue from 'vue' // 引入根组件App.vue import App from './App.vue' // 引入router路由 import router from './rout

  • 浅谈function(函数)中的动态参数

    我们可向函数传递动态参数,*args,**kwargs,首先我们来看*args,示例如下: 1.show(*args) def show(*args): print(args,type(args)) #以元组的形式向列表传递参数 show(11,22,33,44,55,66) 首先我们定义了一个函数,函数show(*args)里面的*args可以接收动态参数,这里我们接收一个元组形式的参数,我们可以向show()里面传递很多参数,函数默认把这些参数作为一个元组进行接收. 2.show(**arg

  • 浅谈python装饰器探究与参数的领取

    首先上原文: 现在,假设我们要增强now()函数的功能,比如,在函数调用前后自动打印日志,但又不希望修改now()函数的定义,这种在代码运行期间动态增加功能的方式,称之为"装饰器"(Decorator). 本质上,decorator就是一个返回函数的高阶函数. Decorator本质是高阶函数? 不信邪的我试了下.. def g(): print("这里是G") return "G" @g def f(): print("这里是F&qu

  • 浅谈SpringBoot处理url中的参数的注解

    1.介绍几种如何处理url中的参数的注解 @PathVaribale 获取url中的数据 @RequestParam 获取请求参数的值 @GetMapping 组合注解,是 @RequestMapping(method = RequestMethod.GET) 的缩写 (1)PathVaribale 获取url中的数据 看一个例子,如果我们需要获取Url=localhost:8080/hello/id中的id值,实现代码如下: @RestController public class Hello

  • Spring Boot/VUE中路由传递参数的实现代码

    在路由时传递参数,一般有两种形式,一种是拼接在url地址中,另一种是查询参数.如:http://localhost:8080/router/tang/101?type=spor&num=12.下面根据代码看一下,VUE 和 Spring Boot 中各自是如何处理传递和接受参数的. Spring Boot package com.tang.demo1.controller; import org.springframework.web.bind.annotation.*; @RestContro

  • 浅谈layui分页控件field参数接收对象的问题

    第一次使用layui分页控件,遇到的问题..field: 'type.typeName' 获取不到值. 页面代码 table.render({ elem: '#bookTable' ,height: 'full-20' ,url: '/admin/getBook' //数据接口 ,request: { pageName: 'begin' //页码的参数名称,默认:page ,limitName: 'length' //每页数据量的参数名,默认:limit } ,page: true //开启分页

  • 浅谈在vue中使用mint-ui swipe遇到的问题

    使用步骤: 1.安装:npm install mint-ui -S 2.引入组件 // 完整引入import Vue from 'vue'; import Mint from 'mint-ui'; import "mint-ui/lib/style.css" Vue.use(Mint); // 按需引入 注意:和Element-ui类似,按需引入时需要借助babel-plugin-component插件 npm install babel-plugin-component -D 修改.

  • 浅谈django的render函数的参数问题

    hello.html 文件代码如下: HelloWorld/templates/hello.html 文件代码: <h1>{{ hello }}</h1> HelloWorld/HelloWorld/view.py 文件代码: # -*- coding: utf-8 -*- #from django.http import HttpResponse from django.shortcuts import render def hello(request): context = {

随机推荐