vue 两个页面切换， 再回到当前页，还是离开前的数据

已于 2024-07-24 09:24:20 修改
阅读量217 收藏
点赞数 3
文章标签： vue.js javascript 前端 elementui
于 2024-07-23 17:41:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58307541/article/details/140642212
版权

1、要保证页面的name 和 建路由的大小写一致

2、页面不用生命周期--activated 调接口刷新

言666
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue切换路由页面数据缓存_Vue-Router实现前端页面缓存
weixin_33587161的博客
01-17 3279
一、使用情景在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载，对应的生命周期函数也会再次执行一遍，但是在有些业务场景下，比如：在有分页数据列表中，切换到第三页需要查看列表对应数据的详情页面，然后返回，如果不加任何处理，列表页面会重新加载，默认显示第一页数据，而不在是之前的第三页，这样如果还需要查看之前查看数据的...
基于Vue实现页面切换左右滑动效果
08-29
可以使用数组indexOf方法来获取当前路由和目标路由的索引值，然后比较这两个索引值，以确定滑动方向。 三、CSS3动画效果 使用Sass定义了动画效果，定义了动画的名称和持续时间。然后，使用Keyframes定义了滑动动画...
vue:退回,标签页和显示位置默认选中之前
qq_45061461的博客
07-11 484
1.项目bug,由于之前nav导航栏,tab标签页 和 其他组件 都有关联,点击菜单栏,其他组件要更改或者添加对应的数据。图中,点击 标签页要添加一个,并且选中跳转页面,还有顶上显示的模块位置也要改变.breadcrumb组件 更改上面显示的 模块菜单信息和点击的菜单信息。tab:标签页显示的点击菜单信息 ->防止刷新数据丢失所以就存起来了。由于是需要在回退的时候更改以上几个组件的数据默认选择或者修改数据,这个我本地数据的结构,保存有整个后端返回的菜单数据信息。还有选中的点击菜单数据信息,
Vue2组件的生命周期及缓存路由（keep-alive）
qq_60654563的博客
04-18 1445
Vue2组件的生命周期
vue中多个路由页面切换造成滚动互相影响问题的解决
浮生离梦的博客
01-03 2685
一、问题描述 在vue的项目开发中，出现了这样的问题。在进入一个路由页面的时候，进行了页面滚动，滚动的位置会被缓存。当离开页面以后，下次再进入一个页面的时候，切换新路由，发现默认进入的位置就是之前滚动的位置。这样，也就造成了多个路由页面滚动会发生互相影响的问题，这也并不是我们所想要的。 二、问题解决 针对这样的问题，通过去vue的官网上，Vue Router中的滚动行为上有解决方法，可以使用scr...
vue切换页面，前一个页面的异步方法还在继续执行
qq_41539807的博客
04-02 1693
vue切换页面，前一个页面的异步方法还在继续执行
vue Tab切换以及缓存页面处理的几种方式
10-16
在使用Vue.js开发后台管理系统时，Tab切换和页面缓存是两个非常常见的需求。Tab切换允许用户在不同的页面或模块之间进行切换，而页面缓存则能够使得切换后的页面保持之前的页面状态，比如填写的表单信息和查询出的...
vue单页应用在页面刷新时保留状态数据的方法
10-17
在开发Vue单页应用（SPA）时，页面刷新可能导致状态数据丢失，这是因为SPA本质上是在同一个页面上动态替换内容，浏览器的刷新操作可能会重置所有状态。为了在页面刷新时保留状态数据，我们通常需要借助Web存储技术，...
vue 实现tab切换保持数据状态
10-15
在这个示例中，`home`和`about`是两个动态组件，它们的状态将在Tab之间切换时被保留。 总结来说，Vue中实现Tab切换保持数据状态的关键在于合理使用`<keep-alive>`组件以及Vue Router的`meta`属性。通过这样的方式，...
vue ref和reactive区别
最新发布
灰海
08-25 364
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Ant Design Vue 快速上手指南与常见问题排查
windowshht的博客
08-22 1151
Ant Design Vue 是一款功能强大的 Vue 组件库，能够帮助开发者快速构建高质量的用户界面。通过本文的快速上手指南，您可以轻松地在项目中集成 Ant Design Vue，并解决常见问题。希望这篇文章能为您的开发工作提供帮助，提升您的开发效率。如需深入了解 Ant Design Vue 的更多功能和组件，请参考Ant Design Vue 官方文档。
基于vue3和audio封装的简易音频播放器
weixin_43734732的博客
08-23 289
【代码】基于vue3和audio封装的简易音频播放器。
vue export的用法
weixin_41203765的博客
08-23 351
在Vue.js中，export关键字主要用于模块化编程，它允许你将一个文件（模块）中的代码、组件、函数、变量等导出，以便在其他文件中通过import语句来使用。这在Vue项目中非常常见，特别是当你需要重用组件、工具函数或配置时。
knowLedge-无关系组件间方法的调用(创建新的 Vue 实例来作为事件总线（Event Bus）方法实现)
2301_76671906的博客
08-23 374
无关系组件间方法的调用(创建新的 Vue 实例来作为事件总线（Event Bus）方法实现)
Vue Styled Components 新版本发布
As的博客
08-22 443
Feature ### 自动添加前缀(Auto Prefixing) vue-styled-components 会在编译 CSS 时自动添加浏览器私有前缀，这可以确保你的 CSS 规则在最常见的浏览器中兼容。
禁止浏览器默认填充密码 vue
weixin_42348009的博客
08-22 383
不能完全阻止浏览器自动填充。你还可以为账号和密码的输入框动态设置。可以防止浏览器自动填充表单中的账号和密码。属性，使浏览器难以识别这些字段。
路由高阶用法 Vue2
qq_53374893的博客
08-20 701
history在 路径上面 的改变 重新刷新是会发送给服务器的 ，但是 服务器没有这个资源会 404 无法找到。但是hash就没有 这个问题 因为/#/ 后面跟的路径是不会被发往服务器的也就是会被当作Hash值。然后输入打包的名字，然后一路回车 就是添基本信息， 这里我们可以不填，我们就一路回车。把dist目录下的东西拷贝到static文件夹下 ，重启服务器，就部署上去了。一个 deactivated 路由缓存切换走的时候 或者 组件销毁的时候。在一个新的文件夹下输入 终端输入命令。
移动端签名
notagoodwriter的博客
08-23 322
【代码】移动端签名。
vue3 ts怎么在页面中切换两个组件并传值到组件
05-17
在Vue3中，可以使用`<component>`标签来动态地渲染组件。在切换组件时，可以在`<component>`标签上使用`:is`属性来指定要渲染的组件。同时，可以使用`v-bind`指令来向组件传递数据。 以下是一个示例代码： ```html <template> <div> <button @click="showComponentA">显示组件A</button> <button @click="showComponentB">显示组件B</button> <component :is="currentComponent" :data="data"></component> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import ComponentA from './ComponentA.vue'; import ComponentB from './ComponentB.vue'; export default defineComponent({ components: { ComponentA, ComponentB, }, setup() { const currentComponent = ref('ComponentA'); const data = ref({ message: 'Hello, World!' }); function showComponentA() { currentComponent.value = 'ComponentA'; data.value = { message: 'Hello, ComponentA!' }; } function showComponentB() { currentComponent.value = 'ComponentB'; data.value = { message: 'Hello, ComponentB!' }; } return { currentComponent, data, showComponentA, showComponentB, }; }, }); </script> ``` 在上面的代码中，我们使用了`<component>`标签来渲染两个组件`ComponentA`和`ComponentB`。在`<component>`标签上使用`:is`属性来指定当前要渲染的组件，并使用`:data`属性来向组件传递数据。在`setup`函数中，我们使用`ref`函数来定义状态变量`currentComponent`和`data`，并在`showComponentA`和`showComponentB`函数中更新它们的值，以便在切换组件时更新页面和向组件传递数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值