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'))

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 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路由this.route.push跳转页面不刷新的解决方案

    Vue路由this.route.push跳转页面不刷新 一.背景 介绍:在vue项目开发中,使用路由进行页面跳转时,路由所跳转的页面不进行刷新. 也就是vue生命周期函数没有执行(created.mounted钩子函数). 案例: A页面: B页面: 问题: 当在A页面第一点击按钮到B页面时,一切正常,当返回到A页面再次点击按钮时,B页面没有执行mounted钩子函数,结果导致mounted函数中查询方法不执行. 二.解决方法: 1.使用activated:{}周期函数代替mounted:{}函

  • 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">点击跳转页面&

  • 解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题

    在做项目的时候,遇到需要做路由跳转,但当用户输入错误url地址,或是其它非法url路由地址,我们或许会想到跳转至404页面.不管你有没有写一个404页面,当出现未匹配路由都需重新指定页面跳转.可能大家首先想到会是路由重定向,redirect来解决这个问题.但实际上通过redirect是没办法更好解决这个问题的. 看代码红色部分 import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components

  • vue-router嵌套路由方式(页面路径跳转但页面显示空白)

    目录 如图所示从欢迎页跳转至用户列表 查询相关资料,有两种解决方案 如图所示从欢迎页跳转至用户列表 欢迎页:路径---welcome 用户页:路径---users 可以看到路径发生了跳转,但跳转后的用户列表页面显示空白.路由嵌套代码如下: 查询相关资料,有两种解决方案 1.path路径不用携带/ (未解决) 2.在home页面需添加router-view标签 在home页面的template下添加<router-view> </router-view>后,用户页面占据了整个页面,而

  • 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项目中利用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 项目中当访问路由不存在的时候默认访问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项目中跳转到外部链接的实例讲解

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题,那么我们如何跳转到外部链接呢,我们只需用 window.location.href = 'url'来实现,具体代码如下: <span @click="See(item.qj_url)">360全景看房</s

  • 解决vue项目中某一页面不想引用公共组件app.vue的问题

    Vue 单页面应用 把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有 导航栏 但是我希望 登陆页面只有一个背景色和一个登陆框 没有导航栏 那应该怎样设置呢? vue中文文档:点击进入 在根组件中:在导航栏使用v-show判断当前路由是否是不需要的组件来完成页面: <template> <div id="app"> <home-header v-show="!(path ==='/') "

  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

  • 在Vue项目中,防止页面被缩放和放大示例

    现在vue的脚手架生成项目之后我们会发现index.html页面中. 在head标签中,我们会看到meta标签中有一条显示是 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"> 但是我们发现这条语句中只是让user-scalable=0,这是不让用户进行缩放. 可以页面会在两个手指进行放大!!! 可以页面会在两个手指进行放大!!! 可以

  • 如何在vue项目中嵌入jsp页面的方法(2种)

    今日一个项目中一块功能模块是其他系统使用jsp已经开发好的页面,想着直接将其嵌入到当前的vue项目中节约开发成本:但是发现并非想象的那么简单 创建一个server.vue组件加载jsp页面 1 .第一种(使用 v-html进行jsp 渲染) server.vue <template> <div class="docker-server"> <div v-html="pageContent"></div> </di

随机推荐

其他