首页 文章详情

【每日一题】Vue 切换路由时怎么保存状态?

前端印记 | 989 2021-09-02 01:55 0 0 0
UniSMS (合一短信)

人生苦短,总需要一点仪式感。比如学前端~

问题:Vue 切换路由的时候,需要保存当时状态的功能,怎么实现呢

方式一 beforeRouteLeave

beforeRouteLeave(to,from,next){
    if('用户已经输入了信息'){
      // 出现弹窗提醒保存草稿,或者自动后台为其保存
      // do something
    }else{
        next(true); // 用户离开
    }
}

在这个路由里,我们可以

  1. 把数据存储到vuex,缺点就是页面刷新数据会丢失

  2. 存储到localStorage并且和vuex关联

  3. 存储到数据库

方式二 keep-alive

keep-alive缓存路由

keep-alive学习看第二篇文章~



END
愿你历尽千帆,归来仍是少年。


让我们一起携手同走前端路!

关注公众号回复【加群】即可

● 工作中常见页面布局的n种实现方法

● 三栏响应式布局(左右固宽中间自适应)的5种方法

● 两栏自适应布局的n种实现方法汇总

● 工作中常见的两栏布局案例及分析

● 垂直居中布局的一百种实现方式

● 常用九宫格布局的几大方法汇总

● 为什么操作DOM会影响WEB应用的性能?

● 移动端滚动穿透的6种解决方案

● Vue + TypeScript 踩坑总结

good-icon 0
favorite-icon 0
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter