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

最新推荐文章于 2023-07-14 15:12:39 发布
原创 最新推荐文章于 2023-07-14 15:12:39 发布 · 797 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #前端

甲方要求在菜单栏增加跳转按钮，点击更改路由并显示确认弹框。但存在bug，返回路由不刷新数据时，点击链接按钮弹框无法显示。解决方案是利用Vue的activated()方法重新激活，将弹框的false值重新赋值为true。

需求：

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

bug：

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

解决方案：

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

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

vue路由切换导致的渲染问题
weixin_43795939的博客
02-03 732
问题： vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重 组件的生命周期钩子（created）不会再被调用, 使得组件的一些数据无法根据 path的改变得到更新 解决： 用watch监听路由的变化，这样不会重新执行created，但是使用同样的代码即可。 export default { data{ return {} }, // ..... watch: { $route(to, from) { // 逻辑代码
Element-ui+Vue 的el-menu菜单第二次点击刷新解决方案
ywenboy的博客
04-08 7029
在html页面<el-menu>加上属性@select="handleSelect"，如以下代码： <el-menu :default-active="activeIndex" :default-openeds="['1']" ...
vue-router的常见问题解决
monparadis的博客
12-08 2662
在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的，我们只要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。 在router.js中的固定写法 const router = new Router({ // mode: 'history', routes, base: process.env.BASE_URL, scrollBehavior(to, from, savedPosition) { if (savedPositi
VUE页面点击时重新加载
bloestone的博客
07-21 1453
因为某些场景需要，每次点击菜单时刷新页面，通过监听路由变化每次重新加载 <template> <div></div> </template> <script> export default { inject: ['reload'], data() { return { }; }, mounted() { ... }, methods: { rebuild() {
vue刷新页面如何保证路由不变_vue 刷新之后 嵌套路由不变 重新渲染页面的方法...
weixin_39834767的博客
12-20 5140
vue 刷新之后 嵌套路由不变 重新渲染页面的方法解决嵌套路由刷新时，路由没有变化，正常情况下页面是不会重新渲染的1、在router-view中加上条件渲染 v-if 默认为true。让它显示出来2、写写一个reload方法，在页面刷新只有，点击某个查询条件的时候调用这个重载的方法这是条件渲染变化了为false在修改数据之后使用 $nextTick，条件渲染变化了为true则可以在回调中获取更新后...
vue 点击当前路由怎么重新加载_Vue 路由切换时页面内容没有重新加载的解决方法...
weixin_39629129的博客
12-19 2684
第二次进入页面，页面路由参数已经改变，但是页面内容不会刷新。问题原因：在组件mounted钩子中调用的刷新页面内容，但测试发现这个钩子没有被调用。后来发现App.vue中使用了：keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。这就是问题所在了。解决办法：使用Vue组件切换过程钩子activated(keep-alive组件激活时调用)，而不是挂载钩...
vue 点击当前路由怎么重新加载_Vue如何全局刷新当前路由页面
weixin_42500616的博客
02-05 2665
文中重点介绍==provide / inject组合——是vue2.2.0新增的api1.this.$router.go(0).通过路由跳转的方式重新渲染页面, 虽然代码量很少,便于书写和理解,但是体验很差,在刷新的一瞬间会出现白屏的现象.2.location.reload().该方法只有一个参数，当值为 true 时，将强制浏览器从服务器加载页面资源，当值为 false 或者未传参时，浏览器则可...
有关vue路由地址信息变化，页面重新加载的问题
九七的博客
02-09 2259
【代码】有关vue路由地址信息变化，页面重新加载的问题。
Vue3 路由跳转如何刷新当前页重新请求数据
ITZDL的博客
03-03 2021
Vue3 路由跳转如何刷新当前页并且重新请求数据
Vue 路由切换时页面刷新页面重新渲染
虎康的博客
09-30 3915
使用路由跳转并携带参数，参数传入跳转路由的界面，并传给父组件，父组件接收到参数后传给子组件，子组件做相应的响应。在路由切换跳转之后，页面是不会进行重新渲染的，因此导致了如下错误。为解决页面不刷新问题。
VUE点击标签页不重新加载网页
m0_58825700的博客
03-02 1473
搜了一堆，要么修改复杂，要么改了没用，最后在官网发现这个变量： 原来修改很简单，在自己定义跳转页面的文件src/router/views/index.js增加如下结构，就可以了： 世界清净了，也减轻了服务端查询压力。 ...
Vue切换路由时页面内容没有刷新（重新加载）
yuyang_z的博客
07-26 5869
最近在做关于vue的项目时，问题是这样的，发现在一个页面提交申请单（用localstorage存储的），需要在另一个页面查看提交的申请单的内容，这里涉及到路由的切换，但发现在申请单提交后，另一个页面并不会实时加载这个提交的内容。 查看了之后是App.vue中使用了<keep-alive> keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DO...
vue 导航菜单重新加载刷新页面
疏雨萧萧千行泪
08-29 9956
知识库项目点击导航菜单栏上点击子菜单刷新页面的需求 应用 vue在当前页面内路由参数发生变化，怎么进行页面刷新。 传统方式 window.location.reload(); 整个页面进行刷新，会出现白屏，体验不好 this.$router.go(0); 同上，体验不友好 推荐方法 使用provide / inject组合方式 原理：允许一个祖先组件向其子孙后代注入一个依赖，不论组件层次有...
vue3 菜单刷新
m0_59093019的博客
12-24 369
menu菜单刷新
element admin 重复点击左侧菜单栏刷新右侧界面
qToHoTp的博客
08-30 731
在"/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 1909
require.cache删除js缓存。require引入的js。
【VUE】若依vue切换tab页签时页面保持不重新加载
热门推荐
SZnAl的博客
08-03 1万+
页面板块打开后，切换Tab栏各页面，页面不重新加载，保持原样，提高用户体验
vue中的ref和$refs的使用
舒小罗
09-03 777
前言：有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 为子组件赋予一个 ID 引用，类似于html中的id， ref ref 被用来给DOM元素或子组件注册引用信息 $refs $refs是一个对象，持有已注册过ref的所有的子组件 下面一起来看下几种用法： (1)获取本页面的DOM元素 <template> <div> <h3 ref="getDom">1234&lt
Vue+ElementUi 侧边栏点击重新加载路由
qq_39040192的博客
06-09 2422
点击侧边栏重新加载页面(重新加载路由) 在二级菜单绑定click事件 , 注意写法是@click.native = “xxx” , 并在 route-view中写 <router-view v-if="showView"></router-view> 在data中定义showView=true data() { return { // 左侧菜单数据 menulist: [], // 左侧菜单的图标 iconsObj
vue3 el-menu 点击就刷新
最新发布
01-23
### Vue3 中 `el-menu` 点击时不刷新页面的解决方案 为了使 `el-menu` 组件在点击时不会触发页面刷新，可以采用以下方法： #### 方法一：绑定事件处理函数 通过为 `<el-menu>` 添加 `@select="handleSelect"` 属性...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值