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

vuejs路由器- this.$route在刷新时始终为空

vuejs路由器是Vue.js框架中的一个核心插件,用于实现前端路由功能。它允许开发者通过定义路由规则,将不同的URL路径映射到不同的组件,实现单页面应用(SPA)的页面切换效果。

this.$route是Vue.js中的一个内置对象,用于访问当前路由的信息。它包含了当前页面的路径、查询参数、路由参数等相关信息。然而,在刷新页面时,this.$route对象会变为空的情况是由于刷新页面会重新加载整个应用,导致Vue实例重新创建,此时路由信息会丢失。

为了解决这个问题,可以使用Vue Router提供的导航守卫功能来处理刷新时的路由信息丢失。具体做法如下:

  1. 在Vue Router的路由配置中,为需要保留路由信息的路由添加一个meta字段,例如:
代码语言:txt
复制
{
  path: '/example',
  component: ExampleComponent,
  meta: { keepAlive: true }
}
  1. 在Vue实例中,使用beforeRouteLeave导航守卫钩子函数来保存当前路由信息:
代码语言:txt
复制
beforeRouteLeave(to, from, next) {
  if (to.meta.keepAlive) {
    sessionStorage.setItem('savedRoute', JSON.stringify(this.$route))
  }
  next()
}
  1. 在Vue实例的created生命周期钩子函数中,判断是否存在保存的路由信息,并将其恢复:
代码语言:txt
复制
created() {
  const savedRoute = sessionStorage.getItem('savedRoute')
  if (savedRoute) {
    this.$router.replace(JSON.parse(savedRoute))
    sessionStorage.removeItem('savedRoute')
  }
}

通过以上步骤,可以在刷新页面时保留并恢复this.$route对象的值,从而解决刷新时始终为空的问题。

推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云对象存储(COS),腾讯云数据库(TencentDB),腾讯云人工智能(AI),腾讯云物联网(IoT),腾讯云移动开发(移动推送、移动分析等),腾讯云区块链(BCS)。

更多关于腾讯云产品的介绍和详细信息,请访问腾讯云官方网站:https://cloud.tencent.com/

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

相关·内容

刷新页面后this.$route.params

刷新页面后 this.$route.params 深入学习 vue-router,按官方文档的教程看下来,结果发现刷新页面后,打印的this....$route.params Vue2 问题复现 路由配置: import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(... updated生命周期钩子中获取(可能实际开发用不上) 为什么会出这个问题呢? 以下是个人现阶段的理解。(可能有误) 结论:此时打印 this....猜测可能是组件创建、渲染阶段,路由还没有跳转,所以打印的信息不对。路由跳转后,修改数据 this.$route是在数据更新阶段,所以获取最新的路由信息应该在 updated中获取。...毕竟开发每个页面都需要路由信息的很少,都需要的话就可以采用上面导航守卫中获取的做法 User.vue User <script

93120

# Vue-router 原理解析

# Vue-router 原理解析 参考: Vue-Router 官网:https://router.vuejs.org/zh/ Vue 技术揭秘/Vue-Router:https://ustbhuangyi.github.io...通过 mixin 的方式, beforeCreate 和 destroy 中将逻辑混入每一个组件上 监听路由改变使用的是 Vue 的双向绑定 然后给 Vue 原型上设置router和route两个属性...接着又通过 Vue.component 定义全局的和组件 this. this....$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法。 this....$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, params, query 等属性。

30931
  • vue项目中遇到的那些事。

    App.vue文件中监听路由绑定参数 watch: { $route (to, from) { // 路由上绑定语言和公司编号 this....4.解决整个项目的数据刷新问题 需求:项目中经常会用到点击某个按钮或者更新某个参数,整个项目的后台数据都从新请求一遍或者刷新整个页面。 类似F5刷新 this....,当然也可以用于刷新部分页面  页面刷新相对流畅,比较推荐的一种方法  App.vue中: <router-view v-if="isRouterAlive...,当我们需要<em>刷新</em>数据<em>时</em>: 利用路由的replace方法   这种方式是进入一个空白页,<em>在</em>空白页里面跳转回原来的页面...,这种方式页面<em>刷新</em>相对流畅 // 需要<em>刷新</em>数据的页面, refresh () { <em>this.</em>

    1.3K20

    Vue中实现路由跳转传参

    $route.query.id新页面参数获取:通过$route.query.参数名获取传递的值 使用用 query 来传参,这种方式是可以解决页面刷新参数消失问题的,query这种方式可以理解是 ajax...id会消失// 配置path,刷新页面id会保留// html 取参 $route.params.id// script 取参 this....$route.params.idparams传参,如果没有路由规则中定义参数,也是可以传过去的,同时也能接收到,但是一旦刷新页面,这个参数就不存在了 新页面参数获取:通过$route.params....$route.query获取,页面跳转的时候,可以地址栏看到请求的参数名以及参数值,刷新页面,参数会一直保留。params传参:params相当于post请求,只能name,通过this....一般是懒加载采用该方式,也就是说暂时不要把该组件import进程序中,路由字典routes中定义,只有当用户访问到某个组件,才动态引入这个组件。route:路由对象。如:this.

    15210

    Vue 踩过的坑

    1.路由变化页面数据不刷新问题 出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个文章页面并不会运行created...watch: { // 方法1 //监听路由是否变化 '$route': function (to, from) { // 判断条件1 判断传递值的变化 if (this....$route.params.articleId) { //获取文章数据 } } // 方法2 '$route': function (to, from) { /...vue-router 能做到,而且更好,它让你可以自定义路由切换页面如何滚动。 注意:这个功能只支持 history.pushState 的浏览器中可用。...,或者自动后台其保存 } else { next(true);//用户离开 } } 还有beforeEach、beforeRouteUpdate这些生命周期函数。

    1.5K20

    Vue-Router学习笔记,持续记录

    单页应用不仅仅是页面交互是无刷新的,连页面跳转都是无刷新的,为了实现单页应用,所以就有了前端路由。...路由组件比普通组件会多route(当前组件相关的路由信息)和router(指向定义的整个路由器)属性; 通过注入路由器,我们可以在任何组件内通过 this.router 访问路由器,也可以通过 this.route...路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录,一个路由匹配到的所有路由记录会暴露 route 对象 (还有导航守卫中的路由对象) 的 route.matched 数组。...Vue-router4.x setup获取当前路由和路由器对象 1.useRoute,返回当前路由地址。相当于模板中使用 $route。必须在 setup() 中调用。...单页面应用下,用户点击刷新 history模式下,路由变化会改变当前的URL,正常的浏览器环境下,用户刷新,请求的链接仍然是最开始请求的入口链接。但是企业微信的浏览器内,则是用改变后的链接去刷新

    9.2K40

    7 个简单的 VueJS 小技巧,助力你成为更好的开发者

    这将帮助你路由器识别页面何时不同。 现在,你的应用将不会重用现有组件,并且会在你切换路由更新你的内容。...此外,VueJS 生命周期钩子会在触发发出自定义事件。事件名称是“hook:”hook+本身的名称(例如,hook:创建) 结合这两个技巧,我们可以编写用于挂载方法内部添加和删除的代码。...它甚至VueJS 官方样式指南中被列为“优先级 A:基本”样式规则。 为什么重要? 它基本上可以从现在的你中拯救未来的你。设计大型项目,很容易忘记你用于prop的确切格式、类型和其他约定。...设计大型项目,很容易忘记你用于prop的确切格式、类型和其他约定。 这是 VueJS 样式指南中的 prop 验证示例。...这只是需要时间,但是花费越来越多的时间 VueJS 中工作并致力于学习顶级技巧、最佳实践和新方法之后,你很快就会成为超级开发人员。 结论 这些绝不是 VueJS 技巧的完整列表。

    2.1K20

    通过 Laravel 创建一个 Vue 单页面应用(五)

    在这个过程中,我们将会考虑构建一个 Axios 客户端实例,以便我们配置 API 客户端具有更高的灵活性。...$router.push({ name: 'users.index' }); }); } 如果你刷新应用,并且删除一个用户,你将会注意到禁用按钮的一个短暂的闪烁,然后然后浏览器没有任何反馈的情况下导航到...这里有一个用作刷新的后台路由,它会捕获所有路由信息并且渲染SPA模板: Route::get('/{any}', 'SpaController@index') ->where('any', '....API客户端选项 尽管我们奉献的 users.js 小型应用程序中,HTTP 客户端可能被认为是有点小题大做了,我认为分离已经我们提供了很好的服务,因为我们多个组件中使用了 API 模块。...我们通过主 app.js 文件中用vue.use(vue router) 注册vue路由器,引入了通过 this.$router 属性的编程导航。

    4.4K20

    vue之router文档

    // 出于演示的目的,这里使用一个的组件,直接使用 HTML 作为应用的模板 var App = {} // 创建一个路由器实例 // 创建实例可以传入配置参数进行定制,保持简单,这里使用默认配置...使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值 this.$route ,并且当路由切换,路由对象会被更新。...路由选项 当创建路由器实例,可以使用以下参数自定义路由器的行为。...虚拟模式测试或者实际的 URL 并不重要,非常有用。例如 Electron 或者 Cordova 应用。非浏览器模式下,路由器同样会退化为抽象模式。...当用 path 格式跳转到一个相对路径,可以用 append: true 选项来确保该相对路径始终被添加到当前路径之后。

    5.4K30
    领券