Vue实现刷新当前路由
Vue点击当前路由实现刷新
前言:在后台管理系统中,有这样一个需求点击当前菜单栏时,页面依旧可以刷新。
点击当前路由实现数据请求页面刷新
思路
点击当前菜单栏时,因为要进行跳转的路由和当前路由相同,所以router.push(当前路由)并不会执行。所以需要借由第三方组件来实现。
判断是否点击的当前路由,如果是则跳转到空白的第三方组件,并传递当前路由。在空白组件中created的生命周期中接受参数,并执行页面跳转。此时页面不会显示任何内容就开始进行跳转,所以速度的问题不用担心。视觉上的效果就是点击当前路由后,页面刷新请求数据。实际路由已经跳转了两次。
Code
//点击路由进行跳转操作
jump(url) {
//判断是否是当前路由
if(url == this.$route.path) {
this.$router.push({
path: 'redirect',
query: rul
})
} else {
this.$router.push({
path: url
})
}
}
空白组件:
<template>
<div></div>
</template>
<script>
export default {
data() {
return {
}
},
created() {
let url = this.$route.query;
let str = '';
for(let i in url) {
str += url[i];
}
const path = this.$route.query;
this.$router.push({
path: str,
});
}
}
</script>
<style>
</style>
实现效果
Vue实现刷新当前路由的更多相关文章
- vue刷新当前路由
原理:跳转到空白页,然后再快速跳回原来的页面: 1,新建一个refresh.vue页面并添加到路由,页面内容如下 <script> export default { beforeRoute ...
- vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应 ...
- Vue.js刷新当前页面
Vue.js的路由跳转很强大,类似ajax的局部刷新,路由跳转时候页面是不刷新的,刷新当前页面的功能不建议用,但是有的时候确实需要刷新当前页面来实现某些需求,这个时候,我们有三 种方法可以实现. 第一 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- Vue开发之基础路由
1.router-link和router-view组件 src/App.vie文件内容: <template> <div id="app"> <div ...
- Vue. 之 刷新当前页面,重载页面数据
Vue. 之 刷新当前页面,重载页面数据 如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据.由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据. 解决方案: 右侧的页面中 scri ...
- vue学习记录④(路由传参)
通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...
- Vue(三)之前端路由
01-前端路由 1.前端路由的实现原理 vue+vue-router 主要来做单页面应用(Single Page Application) 为什么我们要做单页面应用? (1)传统的开发方式 url改变 ...
- vue生成路由实例, 使用单个vue文件模板生成路由
一.vue-loader与vue-router配合 $ cnpm install vue-router --save 二.生成vue-webpack模板 $ vue init webpack-simp ...
随机推荐
- 深入理解Java中配置环境变量
深入理解Java中配置环境变量 配置的目的: 本来只在安装JDK的bin目下能运行java.exe,javac.exe,jar.exe,javadoc.exe等Java开发工具包命令,我们现在想让在所 ...
- Java数据类型转换(自动转换和强制转换)
数据类型的转换,分为自动转换和强制转换.自动转换是程序在执行过程中“悄然”进行的转换,不需要用户提前声明,一般是从位数低的类型向位数高的类型转换;强制类型转换则必须在代码中声明,转换顺序不受限制. 自 ...
- GetContent
Sub GetContent(ByVal URL As String, ByVal SheetName As String) Dim strText As String Dim i As Long D ...
- CentOS 7 Install Gitlab CE
https://hostpresto.com/community/tutorials/how-to-install-and-setup-gitlab-on-centos-7/ http://linux ...
- matplotlib.pyplot 绘制图形
收集的一些觉得非常有用的绘图的资料: Python--matplotlib绘图可视化知识点整理 matplotlib.pyplot matplotlib gallery
- 学习总结(ASP.NET MVC 5)
1. 无论什么时候,如果要写一个新的 MVC 的程序(网站),打开VS之后第一步永远都是“创建新的 ASP.NET MVC 项目” (“新建项目”—→“Web(Visual C#)”—→“ASP.NE ...
- 写入CSS的3种方式
CSS能让网页制作者有效的定制.改善网页的效果. CSS是对HTML的补充(网页设计师曾经为无法很好的控制页面的显示效果而倍感苦恼,CSS的出现解决了这个问题) CSS实现了网页内容和页面效果的彻底分 ...
- OAF 供应商门户添加功能标签后获取当前供应商VendorId的方法
一种是参考管理页面 /oracle/apps/pos/supplier/webui/SuppDtPG 在目标页面的AM中添加VO实例,oracle.apps.pos.supplier.server.S ...
- win7下android开发环境搭建(win7 64位)
win7下android开发环境搭建(win7 64位) 一.安装 JDK 下载JDK最新版本,下载地址如下: http://www.oracle.com/technetwork/java/jav ...
- 大数据技术Hadoop面试题
1. 下面哪个程序负责 HDFS 数据存储.答案C datanode a)NameNodeb)Jobtrackerc)Datanode d)secondaryNameNodee)tasktracker ...