vue 点击当前路由重新加载该路由

最新推荐文章于 2024-06-16 21:44:47 发布
最新推荐文章于 2024-06-16 21:44:47 发布
阅读量1.5k 收藏
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript node.js
原文链接：https://www.cnblogs.com/slightFly/p/12073692.html
版权

总结的相当不错，记录一下。

https://www.cnblogs.com/slightFly/p/12073692.html

补充：有时候不需要加载路由这么烦恼，直接把加载数据的函数再执行一遍就行了

朕爱偷菜
关注
专栏目录
Vue中刷新当前路由的方法
Riona_cheng的博客
08-01 3961
问题场景 项目开发中经常会遇到完成某些操作，刷新当前路由的需求。 问题：比如当我们使用动态组件时，从列表页进入编辑页面，没有牵扯到路由的变动，只是动态加载了不同的组件而已。那么当你编辑完成后，又想回到列表页，此时的列表页还是会停留在没有编辑前的状态。 期望效果：从列表页—>点击编辑—>进入编辑页（路由未改变）—>编辑完成—>刷新路由—>回到列表页—>展示编辑...
vue2笔记 — vue-router路由懒加载的实现
12-09
在Vue.js开发的单页面应用（SPA）中，Vue Router 提供了路由懒加载的功能，以解决由于大型项目导致的打包文件过大的问题。 Vue Router 是 Vue.js 的官方路由库，用于管理SPA中的各个视图组件。在默认情况下，所有...
@manytomany 保存后数据被删除_vue主动刷新页面及列表数据删除后的刷新方法
weixin_39875419的博客
11-22 394
一、场景在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。二、遇到的问题1. 用vue-router重新路由到当前页面，页面是不进行刷新的2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好三、解决方法provide / inject 组合作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深...
element-vue3-admin用router.push跳转新页面并刷新新页面
最新发布
weixin_44534057的博客
06-16 1460
element-vue3-admin用router.push跳转新页面并刷新新页面
vue 点击当前路由怎么重新加载_Vue如何全局刷新当前路由页面
weixin_42500616的博客
02-05 2587
文中重点介绍==provide / inject组合——是vue2.2.0新增的api1.this.$router.go(0).通过路由跳转的方式重新渲染页面, 虽然代码量很少,便于书写和理解,但是体验很差,在刷新的一瞬间会出现白屏的现象.2.location.reload().该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可...
vue3动态路由+页面刷新丢失路由+再次加载路由
m0_66879773的博客
03-14 4011
注：这里会衍生出一个问题，第一次登录的时候，路由信息没加进去，会跳404，所以这里需要做一个判断，判断路由to.matched这个去哪里的路由信息数组有没有数据，没有就再次添加动态路由信息，还有这块需要添加一个全局标识isAddAgain是否需要重新加载路由。动态路由添加后，每次刷新页面空白，这是因为刷新后路由守卫没再次走一遍，这里就需要在App.vue里面做判断，重新添加路由信息并跳转刷新前路由。目前路由只有静态的页面，我们需要做动态路由，需要在路由守卫router.beforeEach中添加。
vue2实现刷新后重新加载动态路由
qq_50994125的博客
04-13 3639
在vue2中，如果使用了动态路由，因为http的无状态性，用户在登录状态下，每次刷新后都需要重新加载路由，否则就会出现刷新后页面丢失。具体实现是通过添加一个前置路由守卫的方法，并设置一个sessionStorage，在每一次跳转路由前进行一次判定。1.登录后设置一个sessionStorage用于判断用户是否刷新。这样就简单的解决了vue2动态路由下刷新后页面丢失的问题。2.设置一个路由前置守卫进行判定。
Vue 路由切换时页面内容没有重新加载的解决方法
10-18
在使用Vue.js开发单页应用程序（SPA）时，页面组件在路由切换时通常会重新渲染以显示新的内容。但有时候，用户可能会遇到路由切换时页面内容没有更新的问题。这通常与Vue的生命周期钩子函数和keep-alive组件使用不当...
vue-router路由懒加载的实现（解决vue项目首次加载慢）
10-18
对于Vue项目而言，利用vue-router实现路由的懒加载可以按需加载各个路由组件，从而避免了应用启动时一次性加载全部页面和组件的资源。当用户访问某个路由时，才会去加载对应模块的代码，这极大提高了应用的性能和...
解决vue动态路由异步加载import组件,加载不到module的问题
10-15
在使用Vue.js框架开发单页应用时，经常会遇到需要动态加载页面组件的情况，尤其是在路由配置项中使用异步加载，以达到按需加载页面组件，优化首屏加载时间的目的。Vue使用webpack作为打包工具时，可以通过import()...
vue实现路由懒加载及组件懒加载的方式
10-16
具体到代码层面，我们可以在Vue Router配置中使用import()来异步加载路由组件，在Vue组件中使用import()或者const声明的异步组件来按需加载子组件。这样不仅使得应用启动时加载更快，也避免了不必要的资源加载，从而...
vue 进入到一个新路由页面后，路由组件页面缓存，如何实现路由组件刷新重载？
韩旭的博客
05-31 3272
文章目录一、如何实现路由重新加载？1-1、设置要刷新的组件v-if，通过v-if实现页面组件层重载。1-2、对外暴露main.js中的 new Vue()实例。1-3、来到我们的路由守卫配置页面。1-4、配置router.beforeEach钩子守卫。 一、如何实现路由重新加载？ 1-1、设置要刷新的组件v-if，通过v-if实现页面组件层重载。 <template> <el-container> <el-header>Header</el-header&g
vue 切换页面没有改变滚动条_VueCLI3.0之vue-router路由详解
weixin_39633500的博客
11-20 246
构建一个完美的前端页面，我们首先要考虑整个页面区域的划分，然后根据不同的地址，往区域中塞入想要表达的内容，这个时候就需要用到前端路由了。这个路由不是放射wifi的路由器，而是前端进行页面转换的利器。前端路由的概念现在前端页面架构中最流行的属SPA架构，什么是SPA架构呢？就是前端整个项目使用一个主界面，然后通过修改地址的方式，变换每个页面模块内的DOM，从而达到了多个页面的效果。切换页面的过程，仅...
Vue刷新/重载当前路由获取数据
Guoye的专栏
09-29 2867
Vue刷新/重载当前路由获取数据 Vue如何刷新或重载当前路由来更新数据？ Vue如何监听同一路由加载事件？ 方案：可以利用路由的quey参数，使用watch进行检测router的变化实现监听。下面是一个实践示例 vue刷新数据当然简单，直接调用合数据的方法就行。 但是，往往业务需求的不同，实现流程或思路也会不同。下面有一个业务需求场景 头部下拉列出仓库， 切换仓库，左侧的菜单不变，都是...
vue学习笔记---【Vue的两种路由模式】
qq_35855343的博客
09-25 859
一个人到底可以懒到什么程度？我感觉可能是无极限吧！ VUE路由 vue的路由干啥用的？ 已知咱们的Vue框架搭建的项目是SPA（单页面应用），项目里只有一个html页面。 为啥只有一个html呢？ 为了减少页面的刷新，每次切换浏览器都刷新页面对用户很不友好。更新视图但不请求刷新页面，是我们前端路由的核心理念。 所以vue的路由的作用就是：通过改变 URL，在不重新请求刷新页面的情况下，更新页面视图。 路由的实现方式 知道了路由是干啥的，那么怎么实现这种功能呢，vue提供了两种实现路由的模式：hash模式.
vue 项目中刷新当前路由
zk_html的博客
11-09 5849
在用 spa(单页面应用) 这种开发模式之前，用户每次点击侧边栏都会重新请求这个页面，用户渐渐养成了点击侧边栏当前路由来刷新 view 的习惯。但现在 spa 就不一样了，用户点击当前高亮的路由并不会刷新 view，因为vue-router 会拦截你的路由，它判断你的 url 并没有任何变化，所以它不会触发任何钩子或者是 view 的变化。
当前vue路由组件重新加载
热门推荐
Ammy的成长
02-27 2万+
利用v-if控制router-view，在根组件APP.vue中实现一个刷新方法 &lt;template&gt; &lt;router-view v-if="isRouterAlive"/&gt; &lt;/template&gt; &lt;script&gt; export default { data () { return { isRouterAlive: tr...
vue-router追加路由，重载当前页面
peade的博客
03-11 3128
在vue后台管理系统里，页面路由是根据后台返回的数据，动态生成的。一般会在路由守卫beforeEach进行一下路由权限处理。 vue-router里追加路由的方法是 addRoutes， 可以通过这个方法，动态追加后台权限给定的路由。 添加完路由后，直接走next() 进入页面，我们会发现，进入的实际上是一个空白页面。console.log路由信息时，我们会发现，追加进去的路由，并没有在里面。而实...
Vue点击路由导航重新加载此页面
07-16
在Vue中，你可以使用`<router-link>`组件来实现路由导航，并通过设置`exact`属性来重新加载当前页面。以下是一个示例： ```html <router-link to="/" exact>Home <router-link to="/about" exact>About ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值