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

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

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

  • 我想在注销后刷新/重新加载页面(屏幕上的消息在5秒钟内可见)。当前代码不会刷新它,所以我仍然在标题中看到用户名,而不是像登录按钮这样的东西。 我已经检查了这篇文章,但没有什么变化。

  • 问题内容: 我试图将我的一些路由与React Router v4一起分组以清理一些组件。现在,我只想将非登录路由组和管理路由分组在一起,但是以下操作无效。 main.js public.js Greeting组件显示在“ localhost:3000 /”,但SignupPage组件显示在“ localhost:3000 / signup”,而Login组件不显示在“ localhost:3000