首页 > 其他分享 >vue 页面刷新防止数据丢失的解决办法

vue 页面刷新防止数据丢失的解决办法

时间:2023-07-27 15:44:56浏览次数:32  
标签:解决办法 vue 丢失 刷新 数据 id 页面

在vue项目中,经常会切换tag,或者刷新页面。导致路由中的数据丢失,  可以使用以下方法

1:将需要缓存的数据  存在stroge(session,local)中,这样即使页面刷新也不会丢失

2:将数据保存在url中,eg:

{         name: 'zlgmmasterdataedit',         path: 'zlgmmasterdata/edit/:id/:into?/:page?',         hidden: true,         component: (resolve) => require(['@Router/view/inor/mastata/detail'], resolve),         meta: {           title: '数据-编辑',           icon: null,           noCache: false,           isKeep: true         }       },   id,into,page都是路由中的参数,如痴挂载在url中,即使刷新数据也会存在
在变量后携带❓ ,会判断在没有数据的时候不显示

标签:解决办法,vue,丢失,刷新,数据,id,页面
From: https://www.cnblogs.com/chenlongsheng/p/17585158.html

相关文章

  • vue2和vue3的区别
    1.性能提升vue3对性能进行了优化,相较于vue2,在运行时的性能更高。vue3采用了Proxy代理机制,使得在数据变化时可以更快的更新视图,从而提供了更好的响应性能。2.ComposiitonAPI(组合式API)vue3引入了CompsitionAPI,这是一种新的API风格,它允许开发者更好的组织和重用代码。相比于......
  • vue3状态管理工具Pinia的使用
    1.安装  npminstallpinia--save 2.src文件夹下新建store文件夹,并新建index.tsimport{createPinia}from'pinia'constpinia=createPinia()exportdefaultpinia2.在main.ts中引入piniaimportpiniafrom'./store'import{createApp}from'vue'......
  • vue3中的watch与vue2中的watch的对比
    新版的 watch 和旧版对比,在使用方式上变化非常大!旧版是这样用的,和 data 、 methods 都在同级配置://旧版的写法:exportdefault{watch:{//...},data(){return{//...}},methods:{//...}} 新版的 watch......
  • vue中vue-alipayer-v2的使用
    项目中播放视频用到了vue-alipayer-v2,代码如下<template><VueAliplayerV2:source="$api.showImageUrl+playvideo.videopath"ref="VueAliplayerV2"></VueAliplayerV2></template><scrip......
  • java xml点击按钮跳转页面
    JavaXML点击按钮跳转页面简介在Java应用程序中,我们经常需要创建用户界面来与用户交互。其中一种常见的方式是使用XML来定义界面布局,并在代码中处理用户的操作。本文将介绍如何使用Java和XML来创建按钮,并在用户点击按钮时跳转到另一个页面。准备工作在开始之前,我们需......
  • vue2.x接入mockJs
    1、安装npminstallmockjs2、创建文件src/mock/api、src/mock/indeximportMockfrom'mockjs'importMockApifrom"./api"Mock.setup({timeout:"300",});constmocks=[...MockApi];exportfunctionmockXHR(){for(letiofmocks)......
  • 【技术实战】Vue技术实战【三】
    需求实战一效果展示代码展示<template><divstyle="display:flex;"><divstyle="display:flex;justify-content:center;align-items:center;"><labelfor="input"style="font-family:Aria......
  • vue--day46---组件自定义事件的解绑
    查看vue版本命令npmlistvue1.App.vue<template><div><h1>{{msg}}</h1><!--通过父组件给子组件传递函数的props实现子给父传数据--><School:receiveSchoolName="receiveSchoolName"></School><!--v-on在student组件标签上所以说是在给......
  • Vue2的/deep/深度选择器失效了?
    /deep/在Vue2样式中的问题。太长不看:不要在VueSFC以外的地方使用/deep/。对于Vue3,请使用最新的:deep()伪类选择器。什么是/deep//deep/是Vue2中一个重要的样式选择器,可以用于选择封装好的组件内部的样式。如果直接在Vue组件上设置class属性,该属性只附加于子......
  • 创建vue项目
    1.vuecreateprojectname  2.选择vue33.创建成功 4.启动项目  5.在package.json中,查看启动命令,有时候不是npmrunserve  6.安装插件安装axios:npmiaxios安装bootstrap:[email protected]在main.j......