浅谈针对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" />
综合来看,第三种方式最简单,推荐使用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
详解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
-
详解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从一个页面跳转到另一个页面并携带参数的解决方法
1.需求: 点击商场跳转到商业体列表 解决方案: 元页面: a标签中添加跳转函数 <a class="orderBtn1 sIRicon2" href="javascript:void(0);" rel="external nofollow" @click="toMallInfo('M000989')"><i class="sIRicon"></i>商场</a>
-
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相同路由不同参数的刷新问题
在使用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和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 = {
随机推荐
- 常用的Javascript设计模式小结
- 仅img元素创建后不添加到文档中会执行onload事件的解决方法
- destoon后台网站设置变成空白的解决方法
- asp缓存类
- js获取html参数及向swf传递参数应用介绍
- MySQL基于DOS命令行登录操作实例(图文说明) 原创
- 微信小程序 数组中的push与concat的区别
- linux设置服务开机自启动的三种方式
- 基于jquery的复制网页内容到WORD的实现代码
- JavaScript中的Math.sin()方法使用详解
- JS模拟简易滚动条效果代码(附demo源码)
- Java解析xml的四种方法汇总
- 简单实现Android读取网络图片到本地
- C语言中的内存泄露 怎样避免与检测
- android中AES加解密的使用方法
- Python系统监控模块psutil功能与经典用法分析
- a标签调用js的方法总结
- 简单了解微信小程序 e.target与e.currentTarget的不同
- golang搭建静态web服务器的实现方法
- 联想服务器RD450 配置RAID5阵列图文方法