vue menu中点击去往其他页面时刷新问题-重新加载

最新推荐文章于 2023-07-14 15:12:39 发布
最新推荐文章于 2023-07-14 15:12:39 发布
阅读量773 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45366905/article/details/114121474
甲方要求在菜单栏增加跳转按钮，点击更改路由并显示确认弹框。但存在bug，返回路由不刷新数据时，点击链接按钮弹框无法显示。解决方案是利用Vue的activated()方法重新激活，将弹框的false值重新赋值为true。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

需求：

应甲方要求，需要在菜单栏中增加一个跳转按钮，此按钮点击后会更改路由并显示弹框让客户确认是否跳转。关闭弹框返回上一个路由，确认则去往新地址并且返回上一个路由。

bug：

当返回的路由本身不再刷新数据时在点击链接按钮时弹框已经更改成false了，进入链接页面不会刷新页面导致无法显示弹框。

解决方案：

利用vue的activated()方法重新激活，进行更改，将弹框的false重新赋值为true。

代码如下：
在这里插入图片描述

vue刷新页面如何保证路由不变_vue 刷新之后 嵌套路由不变 重新渲染页面的方法...
weixin_39834767的博客
12-20 5112
vue 刷新之后 嵌套路由不变 重新渲染页面的方法解决嵌套路由刷新时，路由没有变化，正常情况下页面是不会重新渲染的1、在router-view中加上条件渲染 v-if 默认为true。让它显示出来2、写写一个reload方法，在页面刷新只有，点击某个查询条件的时候调用这个重载的方法这是条件渲染变化了为false在修改数据之后使用 $nextTick，条件渲染变化了为true则可以在回调中获取更新后...
Vue 项目重复点击菜单刷新当前页面
szzlh123456789的博客
03-04 1523
需求：“在当前页面点击当前页面对应的菜单时，也能刷新页面。由于 Vue 项目的路由机制是路由不变的情况下，对应的组件是不重新渲染的。所以重复点击菜单不会改变路由，然后页面就无法刷新了。
VUE页面点击时重新加载
bloestone的博客
07-21 1419
因为某些场景需要，每次点击菜单时刷新页面，通过监听路由变化每次重新加载 <template> <div></div> </template> <script> export default { inject: ['reload'], data() { return { }; }, mounted() { ... }, methods: { rebuild() {
vue 点击当前路由怎么重新加载_Vue 路由切换时页面内容没有重新加载的解决方法...
weixin_39629129的博客
12-19 2667
第二次进入页面，页面路由参数已经改变，但是页面内容不会刷新。问题原因：在组件mounted钩子中调用的刷新页面内容，但测试发现这个钩子没有被调用。后来发现App.vue中使用了：keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。这就是问题所在了。解决办法：使用Vue组件切换过程钩子activated(keep-alive组件激活时调用)，而不是挂载钩...
vue 点击当前路由怎么重新加载_Vue如何全局刷新当前路由页面
weixin_42500616的博客
02-05 2646
文中重点介绍==provide / inject组合——是vue2.2.0新增的api1.this.$router.go(0).通过路由跳转的方式重新渲染页面, 虽然代码量很少,便于书写和理解,但是体验很差,在刷新的一瞬间会出现白屏的现象.2.location.reload().该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可...
有关vue路由地址信息变化，页面重新加载的问题
九七的博客
02-09 2234
【代码】有关vue路由地址信息变化，页面重新加载的问题。
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
在Vue.js应用中，特别是在结合Ant Design Vue进行前端开发时，我们常常会遇到需要在用户刷新页面后保持当前页面路由、选中菜单以及`Menu`选中状态的需求。这通常涉及到路由管理、状态持久化以及组件间通信等技术。 ...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
在本案例中，我们关注的是如何在使用Element-UI的`el-menu`组件时，确保用户在导航选中后刷新页面时仍能保持当前选中的状态。这涉及到Vue.js的路由管理和组件状态持久化。 `el-menu`是Element-UI中用于创建导航菜单...
解决Vue 刷新页面导航显示高亮位置不对问题
10-15
// 页面加载时触发一次，确保刷新后能正确设置高亮 } // ... } // 其他子组件类似处理 } }; ``` 在头部组件中，我们可以根据接收到的`activePage`值来决定哪个导航项应该被设置为高亮。例如，我们可以通过CSS...
Element UI 的el-menu在VUE项目中实现再次点击左侧菜单栏，右侧页面内容刷新
怡暘
08-03 3254
背景：在对项目进行bug走查的时候，测试人员突然提出项目左侧菜单栏再次点击时候要进行页面刷新，当时我真的懵了，vue项目了router还能在当前页面进行再次刷新！！！我怀着疑惑上网查询、咨询足足使用了我3h，多宝贵的时间呀，就这么浪费掉了。最后，好歹，功夫不负有心人，还真有大佬讲到该部分的内容，通过自己尝试最终将问题解决。下面将我的问题解决方法分享给大家。 参考：https://blog.youkuaiyun.com/tq1711/article/details/108386307?utm_medium=distrib
Vue3 路由跳转如何刷新当前页重新请求数据
ITZDL的博客
03-03 1991
Vue3 路由跳转如何刷新当前页并且重新请求数据
Vue 路由切换时页面刷新页面重新渲染
虎康的博客
09-30 3812
使用路由跳转并携带参数，参数传入跳转路由的界面，并传给父组件，父组件接收到参数后传给子组件，子组件做相应的响应。在路由切换跳转之后，页面是不会进行重新渲染的，因此导致了如下错误。为解决页面不刷新问题。
VUE点击标签页不重新加载网页
m0_58825700的博客
03-02 1423
搜了一堆，要么修改复杂，要么改了没用，最后在官网发现这个变量： 原来修改很简单，在自己定义跳转页面的文件src/router/views/index.js增加如下结构，就可以了： 世界清净了，也减轻了服务端查询压力。 ...
Vue切换路由时页面内容没有刷新（重新加载）
yuyang_z的博客
07-26 5849
最近在做关于vue的项目时，问题是这样的，发现在一个页面提交申请单（用localstorage存储的），需要在另一个页面查看提交的申请单的内容，这里涉及到路由的切换，但发现在申请单提交后，另一个页面并不会实时加载这个提交的内容。 查看了之后是App.vue中使用了<keep-alive> keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DO...
vue 导航菜单重新加载刷新页面
疏雨萧萧千行泪
08-29 9920
知识库项目点击导航菜单栏上点击子菜单刷新页面的需求 应用 vue在当前页面内路由参数发生变化，怎么进行页面刷新。 传统方式 window.location.reload(); 整个页面进行刷新，会出现白屏，体验不好 this.$router.go(0); 同上，体验不友好 推荐方法 使用provide / inject组合方式 原理：允许一个祖先组件向其子孙后代注入一个依赖，不论组件层次有...
vue3 菜单刷新
m0_59093019的博客
12-24 349
menu菜单刷新
element admin 重复点击左侧菜单栏刷新右侧界面
qToHoTp的博客
08-30 705
在"/src/layout/index.vue"的<app-main>组件里面增加代码，<app-main v-if="isRouterAlive">，isRouterAlive的默认值为true。 在index.vue的methods里面增加一个reload()方法 reload() { this.isRouterAlive = false; this.$nextTick(function() { this.isRouterAlive = true; }) } 使用pr
清除引入js缓存，vue切换页面重新加载
ygangying的博客
07-14 1865
require.cache删除js缓存。require引入的js。
【VUE】若依vue切换tab页签时页面保持不重新加载
热门推荐
SZnAl的博客
08-03 1万+
页面板块打开后，切换Tab栏各页面，页面不重新加载，保持原样，提高用户体验
vue3 el-menu 点击就刷新
最新发布
01-23
### Vue3 中 `el-menu` 点击时不刷新页面的解决方案 为了使 `el-menu` 组件在点击时不会触发页面刷新，可以采用以下方法： #### 方法一：绑定事件处理函数 通过为 `<el-menu>` 添加 `@select="handleSelect"` 属性来捕获用户的交互行为，并阻止默认动作的发生。这可以通过定义相应的 JavaScript 函数实现。 ```javascript // 定义 handleSelect 方法用于拦截菜单项的选择操作并执行特定逻辑而不是跳转到新链接 methods: { handleSelect(key, keyPath) { console.log('Selected menu item:', key, keyPath); // 可在此处添加其他业务逻辑而不引起页面重载 } } ``` 此部分代码应放置于组件的方法对象内[^2]。 #### 方法二：配置路由模式 如果项目中使用了 Vue Router，则可以在创建路由器实例时指定历史记录模式（history mode），从而避免 URL 改变引起的整个页面重新加载现象。 ```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ /* route definitions */ ] }); ``` 这种方法适用于希望保留浏览器地址栏中的路径变化但又不想让其影响实际渲染的应用场景[^5]。 #### 方法三：利用编程式导航代替声明式的 `<router-link>` 对于某些特殊情况下的需求，比如动态生成菜单条目或者需要更精细控制的情况，可以直接调用 `$router.push()` 来改变视图而无需依赖 HTML 锚标签(`<a>`) 或者带有 `to` 属性的 `<router-link>` 标签。 ```javascript <template> <!-- 使用按钮或其他可点击元素替代传统链接 --> <button @click="navigateTo('/some/path')">Go Somewhere</button> </template> <script setup lang="ts"> import { useRouter } from "vue-router"; let $router = useRouter(); function navigateTo(path:string){ $router.push({ path }); } </script> ``` 上述三种方式都可以有效防止因点击菜单而导致不必要的全页刷新问题，在具体应用过程中可以根据实际情况灵活选用最合适的策略[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值