当前位置: 首页 > 编程笔记 >

vue 刷新之后 嵌套路由不变 重新渲染页面的方法

苏浩瀚
2023-03-14
本文向大家介绍vue 刷新之后 嵌套路由不变 重新渲染页面的方法,包括了vue 刷新之后 嵌套路由不变 重新渲染页面的方法的使用技巧和注意事项,需要的朋友参考一下

解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的

1、在router-view中加上条件渲染 v-if 默认为true。让它显示出来

2、写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法

这是条件渲染变化了为false

在修改数据之后使用 $nextTick,

条件渲染变化了为true

则可以在回调中获取更新后的 DOM

如果需要带有查询参数,可以用编程试导航,query来传参,但是这种方式可能刷新之后会有问题。

我的解决方法是在刷新之后点击页面中的某个条件的时候,将参数存在localstorage里面,这个时候执行reload方法来重新加载路由。这样无论路由变美变化页面都会重新加载,再次加载数据。。

这样还会有一个问题,就在在页面刷新的时候,查询条件会重置,这样存在localstorage里面的值也要清空。

解决方法就是监听浏览器的刷新事件

window.onbeforeunload = function(event) {
 sessionStorage.removeItem('querydataObj')
};

然后清除sessionstorage。

以上这篇vue 刷新之后 嵌套路由不变 重新渲染页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 我收到以下错误 拒绝从执行脚本'http://localhost:8080/Docs/bundle.c2e76650.js'因为其MIME类型('text/html')不可执行,并且启用了严格的MIME类型检查。 如果路径只有一级深(例如localhost/docs),并且带有react-router,那么这似乎是可行的,但一旦路由被嵌套(例如localhost/docs/nestedRoute)

  • router配置 点击进去页面时 这样点击后页面会出现但是刷新或者跳转别的路由会报错 刷新报错: 跳转其他路由报错: 如何解决?

  • vue路由跳转,路径改变但页面空白,刷新后正常显示,导航有十几个菜单,只有其中几个有这个问题,全局监听到路由name属性为null 路由从接口动态获取 name都是唯一的 现货市场交易信息这个菜单点击空白 清空缓存和无痕浏览都试过没有用

  • 本文向大家介绍写给vue新手们的vue渲染页面教程,包括了写给vue新手们的vue渲染页面教程的使用技巧和注意事项,需要的朋友参考一下 前言 本文主要给各位vue的新手们分享了关于vue渲染页面的教程,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 vue渲染页面 路径图 index.html App.vue router.js main.js 效果图: 总结 以上就是这篇文章的

  • 问题: 有异步路由,从中获取参数并返回(组件)。问题是当我从一个到另一个(只是相同的路由,但不同。参数)我的路由器卸载并重新渲染组件。但它应该只传递新的道具,不要触及我的组件生命周期。怎么解决呢?我做错了什么? 代码: 路由器 组件将装入电影组件中 更新:好的,做了一些实验。 替换

  • calendar组件每次点上一月之后,都会自动切换回7月,就像是重新渲染了一样?这种情况该如何去处理?