vue项目中路由跳转页面不变问题及解决
目录
- vue中路由跳转页面不变
- 问题
- 解决方法
- 路由跳转页面不刷新、this.$router.go(-1)不生效
- 解决思路
vue中路由跳转页面不变
问题
今天在开发vue移动端项目的过程中发现了一个bug,就是当按返回键的时候页面并没有发生变化,一开始还以为是没有监听到返回事件,但是通过测试之后发现返回事件监听成功了,路由也发生了变化,相应事件也触发了,就是页面视图没有跟着改变。
解决方法
项目中路由设置的是 hash模式,所以对 hashchange 事件进行监听(hash模式下,路由的变化会触发hashchange事件)
在App.vue中给hashchange绑定事件:
mounted() { // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是 hashchange事件 window.addEventListener('hashchange', () => { let currentPath = window.location.hash.slice(1) if (this.$route.path !== currentPath) { this.$router.push(currentPath) } }, false) }
路由跳转页面不刷新、this.$router.go(-1)不生效
vue项目中遇见了这样一个问题:使用this.$router.go(-1)回到上一页,路由改变了,但是页面展示还是停留在当前页面,需要手动刷新才能渲染跳转后的页面。
router-view 如下:
<router-view :key="$route.fullPath"></router-view>
一般情况用到上面这种写法就能解决问题了,但是我这里还是不生效。
然后我就想到了如下方法:
解决思路
在beforeRouteEnter钩子时,使用sessionStorage存储from.path;然后在点击返回的时候使用this.$router.push
代码:
beforeRouteEnter(to, from, next) { next(()=> { window.sessionStorage.setItem('lasterRouter', from.path) }) },
//返回上一页 this.$router.push(window.sessionStorage.getItem('lasterRouter'))
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue路由this.route.push跳转页面不刷新的解决方案
Vue路由this.route.push跳转页面不刷新 一.背景 介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新. 也就是vue生命周期函数没有执行(created.mounted钩子函数). 案例: A页面: B页面: 问题: 当在A页面第一点击按钮到B页面时,一切正常,当返回到A页面再次点击按钮时,B页面没有执行mounted钩子函数,结果导致mounted函数中查询方法不执行. 二.解决方法: 1.使用activated:{}周期函数代替mounted:{}函
-
Vue-router路由判断页面未登录跳转到登录页面的实例
如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该
-
vue路由拦截及页面跳转的设置方法
路由设置:router/index.js export default new Router({ routes: [ { path: '/selfcenter', name: 'selfcenter', meta: { requireAuth: true // 配置此条,进入页面前判断是否需要登陆 }, component: selfcenter } ] }) main.js: /* eslint-disable no-new */ router.beforeEach((to, from, ne
-
vue 点击按钮 路由跳转指定页面的实现方式
目录 点击按钮 路由跳转指定页面 最终效果 vue跳转页面常用的方式 1:router-link跳转 2:this.$router.push() 3.this.$router.replace() 4.this.$router.go(n) ps : 区别 点击按钮 路由跳转指定页面 最终效果 点击指定按钮,跳转指定 /login 页面 代码: <button @click="gotolink" class="btn btn-success">点击跳转页面&
-
vue 实现路由跳转时更改页面title
一.router文件夹下的index文件中给每个path添加meta:{}: export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' } }, { path: '/studentInfo', name: 'studentInfo', component: studentInfo, meta: { title: 'title2' } } ]
-
vue-router嵌套路由方式(页面路径跳转但页面显示空白)
目录 如图所示从欢迎页跳转至用户列表 查询相关资料,有两种解决方案 如图所示从欢迎页跳转至用户列表 欢迎页:路径---welcome 用户页:路径---users 可以看到路径发生了跳转,但跳转后的用户列表页面显示空白.路由嵌套代码如下: 查询相关资料,有两种解决方案 1.path路径不用携带/ (未解决) 2.在home页面需添加router-view标签 在home页面的template下添加<router-view> </router-view>后,用户页面占据了整个页面,而
-
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
在做项目的时候,遇到需要做路由跳转,但当用户输入错误url地址,或是其它非法url路由地址,我们或许会想到跳转至404页面.不管你有没有写一个404页面,当出现未匹配路由都需重新指定页面跳转.可能大家首先想到会是路由重定向,redirect来解决这个问题.但实际上通过redirect是没办法更好解决这个问题的. 看代码红色部分 import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components
-
vue项目中路由跳转页面不变问题及解决
目录 vue中路由跳转页面不变 问题 解决方法 路由跳转页面不刷新.this.$router.go(-1)不生效 解决思路 vue中路由跳转页面不变 问题 今天在开发vue移动端项目的过程中发现了一个bug,就是当按返回键的时候页面并没有发生变化,一开始还以为是没有监听到返回事件,但是通过测试之后发现返回事件监听成功了,路由也发生了变化,相应事件也触发了,就是页面视图没有跟着改变. 解决方法 项目中路由设置的是 hash模式,所以对 hashchange 事件进行监听(hash模式下,路由的变化
-
在vue项目中利用popstate处理页面返回的操作介绍
需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监听,History.pushState()(参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址), 注意:IOS版的微信,是会立即触发popstate事件,所以需要pageshow做下处理,(当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件.(这包括了后退/
-
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题的根本原因没有被找到,因为这个问题出现的偶然性太高了,而且有的手机上会出现,有的不会,用模拟器不会出现,用真机又会出现,不知道是网络原因还是webpack的bug.在github.stackoverflow等各种地方也找不到原因和解决方案,这是github上关于这个问题的讨论:Loading chu
-
Vue项目中使用setTimeout存在的潜在问题及解决
目录 使用setTimeout存在的潜在问题 上代码 总结 使用setTimeout存在的潜在问题 在开发项目中遇到这样的序曲,点击按钮弹框,每次进入的时候都需要默认选中Android, 这个时候就遇到了一个小坑,当用户点击弹框后,选择iOS,再点击cancel或者OK,楼主在开发的时候,点击cancel按钮,执行下面代码 this.showDialog = false; // 关闭弹框 this.createForm.platform = "Android"; // 重置下拉框的默认
-
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
1.如果只使用config配置的相关js接口 可采用如下方式引入 执行 npm weixin-sdk-js --save 局部引入 在vue页面中 import wx from 'weixin-sdk-js'; 全局引入 在vue 的main.js 页面中 引入后编写到vue原型链上,然后全局调用 import wx from "weixin-sdk-js"; Vue.prototype.$wx = wx; 2.如果要使用agentConfig配置的相关接口 一定不要执行npm命令引入
-
vue 项目中当访问路由不存在的时候默认访问404页面操作
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在最后添加一个path: * ,优先级从上到下查找路由,都没有的时候全部指向 404页面 ,代码如下: const baseRoute = [ { path: '/login', name: 'login', component: Login }, {path: '/', redirect: '/in
-
vue多页面项目中路由使用history模式的方法
前言 之前写了一个vue项目中需要添加一个打印的页面,需要使用多页面的模式进行开发,vue-cli3出初始化的项目配置多页面还是很容易的,但是发现print.html没有办法配置history模式的路由,一旦使用history模式的路由.写了一个简单的demo在网上寻求帮助没有能解决问题,后来没有办法只能使用hash模式完整项目了. 如何解决 有一天看webpack文档的时候,突然看到了historyApiFallback配置项,一瞬间感觉找到方法了.下班后回家就下载下之前的项目折腾了. 之前的
-
vue中路由跳转不计入history的操作
我就废话不多说了,大家还是直接看代码吧~ <van-field label="选择部门" :value="arr.DepartMentName" readonly right-icon="arrow" @click="$router.replace({ name: 'tree' })" /> 在下个页面使用replace跳回来即可 补充知识:vue-router模式为history的项目打包发布后不能通过地址栏里的
-
Vue项目中实现带参跳转功能
页面介绍: 主页面:name -> shishengzuotanhuichaxun 此页面表格中的数据均通过接口从后端获取数组对象并渲染,每一行数据都有对应的行id,我们的目的就是根据表格中每行数据的行id不同进而跳转至对应的子详情页面 子页面(详情页面):name -> Cinfo 此页面为拿到行id后通过调用相应接口所要渲染的页面 项目简介及使用带参跳转的原因: 本系统使用Vue进行项目框架搭建,使用Vant移动端框架的组件库进行开发.主页面中的表格使用了纯原生html的th.
-
vue项目中跳转到外部链接的实例讲解
当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题,那么我们如何跳转到外部链接呢,我们只需用 window.location.href = 'url'来实现,具体代码如下: <span @click="See(item.qj_url)">360全景看房</s
随机推荐
- 零基础易语言入门教程(六)之逻辑型命令
- javascript 事件处理示例分享
- cmd replace 文件替换使用说明
- 删除Table表中的重复行的方法
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- java解析php函数json_encode unicode 编码问题
- Java中checkbox实现跨页多选的方法
- aspx中的mysql操作类sqldatasource使用示例分享
- PHP代码判断设备是手机还是平板电脑(两种方法)
- Android中隐藏状态栏和标题栏的方法汇总(隐藏状态栏、标题栏的五种方法)
- Bootstrap组件学习之导航、标签、面包屑导航(精品)
- JSP中九大内置对象和四种属性范围详解
- 基于javascript实现根据身份证号码识别性别和年龄
- Knockout结合Bootstrap创建动态UI实现产品列表管理
- 通过js动态操作table(新增,删除相关列信息)
- linux定时任务基础命令介绍(14)
- C++编程中删除运算符与相等运算符的使用解析
- 在JavaScript中使用JSON数据
- 加速你的RealOne Player
- 浅谈python图片处理Image和skimage的区别