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实现刷新当前路由的更多相关文章

  1. vue刷新当前路由

    原理:跳转到空白页,然后再快速跳回原来的页面: 1,新建一个refresh.vue页面并添加到路由,页面内容如下 <script> export default { beforeRoute ...

  2. vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应 ...

  3. Vue.js刷新当前页面

    Vue.js的路由跳转很强大,类似ajax的局部刷新,路由跳转时候页面是不刷新的,刷新当前页面的功能不建议用,但是有的时候确实需要刷新当前页面来实现某些需求,这个时候,我们有三 种方法可以实现. 第一 ...

  4. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  5. Vue开发之基础路由

    1.router-link和router-view组件 src/App.vie文件内容: <template> <div id="app"> <div ...

  6. Vue. 之 刷新当前页面,重载页面数据

    Vue. 之 刷新当前页面,重载页面数据 如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据.由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据. 解决方案: 右侧的页面中 scri ...

  7. vue学习记录④(路由传参)

    通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...

  8. Vue(三)之前端路由

    01-前端路由 1.前端路由的实现原理 vue+vue-router 主要来做单页面应用(Single Page Application) 为什么我们要做单页面应用? (1)传统的开发方式 url改变 ...

  9. vue生成路由实例, 使用单个vue文件模板生成路由

    一.vue-loader与vue-router配合 $ cnpm install vue-router --save 二.生成vue-webpack模板 $ vue init webpack-simp ...

随机推荐

  1. 深入理解Java中配置环境变量

    深入理解Java中配置环境变量 配置的目的: 本来只在安装JDK的bin目下能运行java.exe,javac.exe,jar.exe,javadoc.exe等Java开发工具包命令,我们现在想让在所 ...

  2. Java数据类型转换(自动转换和强制转换)

    数据类型的转换,分为自动转换和强制转换.自动转换是程序在执行过程中“悄然”进行的转换,不需要用户提前声明,一般是从位数低的类型向位数高的类型转换;强制类型转换则必须在代码中声明,转换顺序不受限制. 自 ...

  3. GetContent

    Sub GetContent(ByVal URL As String, ByVal SheetName As String) Dim strText As String Dim i As Long D ...

  4. CentOS 7 Install Gitlab CE

    https://hostpresto.com/community/tutorials/how-to-install-and-setup-gitlab-on-centos-7/ http://linux ...

  5. matplotlib.pyplot 绘制图形

    收集的一些觉得非常有用的绘图的资料: Python--matplotlib绘图可视化知识点整理 matplotlib.pyplot matplotlib gallery

  6. 学习总结(ASP.NET MVC 5)

    1. 无论什么时候,如果要写一个新的 MVC 的程序(网站),打开VS之后第一步永远都是“创建新的 ASP.NET MVC 项目” (“新建项目”—→“Web(Visual C#)”—→“ASP.NE ...

  7. 写入CSS的3种方式

    CSS能让网页制作者有效的定制.改善网页的效果. CSS是对HTML的补充(网页设计师曾经为无法很好的控制页面的显示效果而倍感苦恼,CSS的出现解决了这个问题) CSS实现了网页内容和页面效果的彻底分 ...

  8. OAF 供应商门户添加功能标签后获取当前供应商VendorId的方法

    一种是参考管理页面 /oracle/apps/pos/supplier/webui/SuppDtPG 在目标页面的AM中添加VO实例,oracle.apps.pos.supplier.server.S ...

  9. win7下android开发环境搭建(win7 64位)

    win7下android开发环境搭建(win7 64位)   一.安装 JDK 下载JDK最新版本,下载地址如下: http://www.oracle.com/technetwork/java/jav ...

  10. 大数据技术Hadoop面试题

    1. 下面哪个程序负责 HDFS 数据存储.答案C datanode a)NameNodeb)Jobtrackerc)Datanode d)secondaryNameNodee)tasktracker ...