首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

页面刷新时Vue Router Gaurd不工作

页面刷新时,Vue Router Guard不工作的原因是因为刷新页面会导致Vue应用重新加载,而Vue Router的导航守卫是在Vue应用初始化时注册的。当页面刷新时,Vue应用会重新初始化,导致之前注册的导航守卫失效。

为了解决这个问题,可以考虑以下几种方法:

  1. 使用持久化状态:将Vue Router的状态进行持久化,可以使用localStorage或者cookie等方式将路由状态保存下来。当页面刷新时,可以在Vue应用初始化时读取保存的路由状态,并重新注册导航守卫。
  2. 利用服务端渲染(SSR):使用服务端渲染可以在每次页面刷新时重新生成Vue应用的实例,从而保持导航守卫的有效性。SSR可以通过Nuxt.js等框架来实现。
  3. 使用路由守卫的beforeunload事件:beforeunload事件在页面即将关闭或刷新时触发,可以在该事件中保存当前的路由状态。当页面重新加载时,可以在Vue应用初始化时读取保存的路由状态,并重新注册导航守卫。
  4. 使用路由守卫的beforeRouteLeave钩子:beforeRouteLeave钩子在离开当前路由之前触发,可以在该钩子中保存当前的路由状态。当页面重新加载时,可以在Vue应用初始化时读取保存的路由状态,并重新注册导航守卫。

总结起来,解决页面刷新时Vue Router Guard不工作的方法主要是通过持久化状态、服务端渲染、beforeunload事件或beforeRouteLeave钩子来保存和恢复路由状态,从而保持导航守卫的有效性。

对于Vue Router Guard不工作的具体问题,可以提供更详细的场景和代码,以便给出更具体的解决方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Vue 改变数据,页面刷新的问题

    最近在用 element-ui 开发一个网站,使用 table 组件,发现修改完数据,有时候会延迟一两秒,页面才会发生变化。 ?...修改完后,赋值给对应的表格数据 this.tableData[this.currentRow] = this.popupData 注意事项(以下内容摘自官方文档) 由于 JavaScript 的限制,Vue...不能检测以下数组的变动: 当你利用索引直接设置一个数组项,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度,例如:vm.items.length = newLength...= 2 // 不是响应性的 为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新: // Vue.set...$set 实例方法,该方法是全局方法 Vue.set 的一个别名: vm.

    3.3K10

    vue-router 路由传参,刷新页面参数丢失

    name,路径用 name,路径用 name , 用 path 会获取不到;如果在路由配置中没有添加 /:id 即 path: ‘detail’,url 中不会显示 id,在详情页还是可以拿到参数 id,但刷新后参数丢失...如果在路由中设置了params参数 /:id,但是在跳转的时候没有传递参数,会导致页面没有内容或跳转失败,可在后面加 ?代表这个参数是可选的,即 /:id?...传递的参数是对象或数组 还有一种情况就是,如果通过 query 的方式传递对象或数组,在地址栏中会被强制转换成 [object Object],刷新后也获取不到对象值。...传参方式对比: 通过 $router.push 的 params + name 传参,若路由中没有设置params参数,参数不会拼接在路由后面,但是页面刷新参数会丢失。...console.log(this.id) } } 详见:动态路由匹配 路由组件传参 此外,还可以通过把参数存在 sessionStorage 或 localStorage 中来解决页面刷新参数丢失的问题

    4.3K10

    vue单页 使用keep-alive页面返回刷新

    使用vue单页开发项目遇到一个很恶心的问题:在列表页点击一条数据进入详情页,按返回键返回列表页页面刷新了,用户体验非常差啊!!!...首先在App.vue页面上有下面一段代码,我们都知道这是页面渲染的地方 把这段代码改成如下: 我们能看到这段代码做的逻辑判断,当路由的meta属性的keepAlive属性值为true页面的状态保存,其他情况下不保存状态。...}, meta: { pageTitle: '主页', keepAlive: true } } 这样设置了之后,主页的状态就会保存,返回键返回到主页页面不会刷新请求数据了...从主页跳到任何页面,再返回主页都不会刷新页面!这并不是我想要的,我只要从详情页返回列表页刷新页面,其他情况下是需要刷新的,那么我就需要定制化处理了。

    2.3K30

    Vue3+Vue Router跳转相同路由监听页面刷新并执行某个操作

    1 起源 最近遇到了个这样的需求,大概就是:点击某个按钮,进入某个页面,然后再在这个页面执行某个操作(比如请求某个接口、赋初始值啥的)。 这个需求看似简单,其实也不难。...**但是,**我遇到了个问题,就是当在那个页面点击这个按钮的时候,因为跳转路由路径是一样的原因,页面是不会刷新的,那我怎么判断我是否我是否点击了那个按钮并且跳到了这个页面呢?...{ // 路由变化,执行相应操作 query() } ) ok,经过上面的操作便可以在跳转相同路由下,监听页面刷新并执行某个操作啦。...3 知识扩展-关于Vue Router路由传参的几种常用方式 说到这里,vue-router传参的几种方式也顺便总结一下吧 3.1 params传参(显示参数) 浏览器里路由地址显示为这样: http:.../${yourParam}', }) 关于参数的获取: route.params.id 3.2 params传参(不显示参数) 由于从Vue Router的2022-8-22 这次更新后,便不能再用这种方式来写

    3.6K50

    vue 加载页面触发时间_Vue 刷新页面时会触发事件吗「建议收藏」

    使用localstorage做本地存储,然后我想在刷新页面或者离开页面的调用localstorage方法 1、页面刷新使用localstorage,也就是当vue被实例化之后有如下几个可以供你使用.../ 创建前状态 } created () { // 创建完毕状态 } beforeMount(){ // 挂载前状态 } mounted(){ // 挂载结束状态 } } 这几个都是可以在页面刷新的时候操作本地存储...注: 其实本地存储也可以写在vue实例当中,本质上与vue无关,你只是在当页面刷新的时候为了执行一段js而已 main.js /* 项目启动 */ import Vue from ‘vue’ import.../router’ /**************************** 写这里也不是不可以 ****************************/ new Vue({ router: router...$mount(‘#app’) 2、页面关闭与vue的生命周期无关,也不存在销毁一说,因此关闭页面没有方法让你使用操作localStorage,这一点跟楼上几位说的不一样。

    1.6K20

    vuex刷新后数据消失_如何解决vue修改数据刷新页面

    vue 页面刷新数据存储 // 在页面加载读取sessionStorage里的状态信息 if (sessionStorage.getItem('caramaAdd'...$store.state.creame=JSON.parse(sessionStorage.getItem('caramaAdd')) } // 在页面刷新将vuex里的信息保存到...sessionStorage里 // beforeunload事件在页面刷新先触发 window.addEventListener('beforeunload', ()...$store.state.creame)); }); 是不是特别简单,底下存储,上边跟新,但是被忘了,退出该页面,需要删除存储的值,否则当你再次进入时,存储的还是当前值,一定要记得哦...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.8K20

    react-router v6使用createHashHistory进行history.push,url改变页面渲染

    问题描述 在我使用history库的createHashHistory创建history对象,使用history.push进行页面跳转的时候,url 变化,但是页面没有渲染。...,还需要监听 history 的变化,手动重新渲染页面。...(可参考:: react-router-dom v6 组件外使用路由跳转) 因为太麻烦,没有采用。 最终使用了react-router-dom中的useNavigate进行页面跳转。...import { useNavigate } from 'react-router-dom' const navigate = useNavigate()//useNavigate需要在函数组件内部使用...③创建组件,函数式组件只需调用函数即可创建组件,而类组件必须先实例化一个对象,然后通过这个实例化对象调用render函数来创建组件 ④类组件是用生命周期钩子函数来实现业务逻辑的,而函数式组件使用react

    4K20

    vue学习:使用tab标签页刷新页面停留在当前tab

    现状:无论当前停留在哪个标签,刷新页面都会回到默认设定的标签 原始代码如下 标签中 v-model="activeName",它和选项卡中的 name属性进行绑定; 而在 data() 中设置了activeName: 'first',所以首次打开这个页面或者刷新页面后...,都会定位到第一个标签 现在想实现这样一个效果:当处于某个标签刷新页面会停留在当前标签 思路:当点击某个标签,获取到当前 name 的值,然后刷新页面把name的值赋给activeName,这样每次刷新后...activeName总能拿到上次的标签name值,也就会停留在当前页 具体实现方法:获取到标签name值,先把name放到缓存中,之后再刷新页面,再从缓存中取出name值赋给activeName 实现步骤...,确实会停留在当前标签,切换标签后刷新,也能达到这个效果 但是如果是首次进入系统,直接点击【创建随机数据】这个菜单,会发现没有自动打开任何一个标签,因为刷新页面后是获取缓存中的name,而此时标签name

    3.2K30
    领券