vue中router跳转本页刷新
问题: 导航栏的地址发生改变但是页面却不刷新 (用vue-router路由到当前页面,页面是不进行刷新的)
解决:
1.);

2.location.reload()

上两种方法 都会出现闪屏的问题 用户体验不好
3. 用一个空页面做中转,解决了闪屏的问题,可以看到导航栏路径的快速切换
(这个方法在切换的时候生效,但是在返回上一步的时候因为路由切换的原因所以返回到/loading页面又再次返回来 如果说路由切换不是通过返回上一步实现 这个方法还是可取的)
中间层页面:

组件使用页:

以上方法都满足不了 我的需求
同志们!!!! 别本页了 开新页吧 只需window.open一下 一句代码解决所有烦恼 (如果产品乐意的话)

终级解决。。。。。nice
4. 在App.vue,声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载。(provide /inject )
【祖先组件(provide )向其所有子孙后代(inject )注入一个依赖】
App.vue中:
1.data中声明变量 2.绑定v-if 3.方法里写逻辑 4.向后代注入依赖

在需要的页面 调用方法
我需要在当前页点击链接刷新本页 刷新后点击页面返回上一步再次刷新本页 所以需要两处调用reload方法;


结束。。。。。。。。。。

vue中router跳转本页刷新的更多相关文章
- Vue中router两种传参方式
Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...
- vue 中router.go;router.push和router.replace的区别
vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...
- vue中$router以及$route的使用
路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...
- vue中router以及route的使用
路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...
- Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
文章目录 1.先看router中的index.js文件 2.router-link的使用 3.实现的效果 前提:router已经安装 1.先看router中的index.js文件 import Vue ...
- vue中$router.push打开新窗口
在vue中使用 this.$router.push({ path: '/home' }) 默认是替代本窗口 如果想新开一个窗口,可以使用下面的方式: let routeData = this.$ro ...
- vue中$router和$route的区别
$router是VueRouter的实例,在script标签中想要导航到不同的URL,使用$router.push方法. 返回上一个历史history用$router.to(-1) $route为当前 ...
- vue中$router 与 $route区别
vue-router中经常会操作的两个对象\(route和\)router两个. 1.$route对象 $route对象表示当前的路由信息,包含了当前 URL 解析得到的信息.包含当前的路径,参数,q ...
- vue中router与route区别
1.$route对象 $route对象表示当前的路由信息,包含了当前 URL 解析得到的信息.包含当前的路径,参数,query对象等. 1. $route.path 字符串,对应当前路 ...
随机推荐
- ASP.NET Core 3.0 : 二十八. 在Docker中的部署以及docker-compose的使用
本文简要说一下ASP.NET Core 在Docker中部署以及docker-compose的使用 (ASP.NET Core 系列目录). 系统环境为CentOS 8 . 打个广告,求职中.. 一 ...
- 在Mac OSX上运行Windows应用程序
在Mac OSX中,借助wine,不需要安装虚拟机也可以运行Window应用程序. wine是一个在Linux和UNIX之上的,WIndows3.x和Windows APIs的实现.是运用API转换技 ...
- 面向对象之---this的用法
在绝大多数情况下,函数的调用方式决定了this的值 全局环境 无论是否在严格模式下,在全局执行环境中,this都指向全局对象· 在全局作用域中调用一个函数时,this总是指向Global对象(在浏览器 ...
- webpack中如何使用图标字体
1.webpack安装相关依赖 $ npm install font-awesome-webpack less less-loader css-loader style-loader file-loa ...
- ArangoDB简单实例介绍
数据介绍: 2008美国国内航班数据 airports.csv flights.csv 数据下载地址:https://www.arangodb.com/graphcourse_demodata_ara ...
- vscode debug golang
基础的配置网上的教程很多,这里只是记录自己碰到的坑. 官方文档 https://code.visualstudio.com/docs/editor/debugging#_launch-configur ...
- 网络安全-主动信息收集篇第二章-二层网络扫描之nmap
nmap是网络层.传输层最重要的扫描工具之一,可以结合脚本对应用层的扫描和对网络弱点发现. 网络层发现nmap使用: Usage: nmap [Scan Type(s)] [Options] {tar ...
- P2114 [NOI2014]起床困难综合症
#include<iostream> #include<cstdio> using namespace std; ; ]; long long n,m; long long t ...
- Java I/O体系从原理到应用,这一篇全说清楚了
本文介绍操作系统I/O工作原理,Java I/O设计,基本使用,开源项目中实现高性能I/O常见方法和实现,彻底搞懂高性能I/O之道 基础概念 在介绍I/O原理之前,先重温几个基础概念: (1) 操作系 ...
- 自建yum仓库,该仓库为默认仓库
YUM REPO: http://content.example.com/rhel7.0/x86_64/dvd 创建自建yum REPO文件: vim /etc/yum.repos.d/redhat. ...