vue-router实现页面状态与url同步

前言

大多数文章链接里都包含了一些文章状态相关的字段,其状态传入的方式大致有以下两类:

  • query类字段,如https://abc.com/article?id=1&num=1&size=10
  • params类字段,如https://abc.com/article/:id

这些url里的状态字段,可以将页面状态保存在url中,同时也提供了查询字段的填写入口。

同样的,在我们的业务中,常常会遇到一些列表查询页面,页面里提供多个字段进行筛选,如果我们使用vue单页应用的方式进行开发,用户选择的筛选字段则无法保存,每次刷新或重新进入页面时,状态都会被清空,导致用户体验度降低。

本文通过vue-router将页面状态与url同步,实现页面状态的保存,也使页面可以以url传参形式快速进入并查询对应的信息。

query类字段和params类字段如何选择?

vue-router中,路由传参形式有两种:queryparams

query类字段

query类字段是可选的,在链接中?后通过&分隔以键值对形式进行编写,如https://abc.com/article?id=1&num=1&size=10,适合一些可选参数进行使用。

params类字段

params类字段是必填的,直接在链接的路径当中,如https://abc.com/article/:id,如果在路由配置中定义了params类字段,但是在url里没有填写对应的字段,那么将无法匹配路由页面,适合一些必填的页面参数进行使用。

针对两种传参形式的特点,query类字段更符合我们的需求,因为页面中筛选字段是可选的。

通过watch和$router.push实现

状态数据同步方向

  • 页面UI -> data -> watch -> $router.push -> query
  • url -> query -> watch -> data

如上数据同步方向所示,共有两种:

第一种是用户在页面操作UI来改变状态数据,触发监听器函数执行$router.push函数,将状态同步到url上;

第二种是用户直接输入或修改url,触发监听器函数,将状态同步到页面数据。

代码实现

export default {
  data () {
    return {
      state: this.$route.query.state || '',
      refresh: false
    }
  },
  watch: {
    state (val) {
      const query = { ...this.$route.query, state: val };
      // 如果为空则删除属性,避免出现在url上
      !val && delete query.state;
      this.$router.push({ query });
    },
    '$route.query': {
      handler (query) {
        const { state } = query;
        state && (this.state = state);
        // 状态改变,刷新数据
        this.refresh = true;
      },
      deep: true
    }
  }
}

总结
  1. 选择可选query类字段去保存页面状态,更符合url中query的设计理念,让页面的筛选状态可以保存在url上,以免刷新重置状态,同时也为带状态快速访问提供入口,提高页面的可复用性和可扩展性。

  2. 如果页面状态与url同步,那么用户可以从两个地方去修改状态:

    • 页面UI

      控制流为:页面UI -> data -> watch -> $router.push -> query

    • url

      控制流为:url -> query -> watch -> data

其他

原文链接:github.com/Jim-Rae/blo…

原文链接:juejin.im

上一篇:【真香系列】Vue-Next 源码第三章
下一篇:JavaScript异步编程核心概念-Promise

相关推荐

  • (详解)从浏览器输入 URL 到页面展示过程

    引言 对于面试常问的从浏览器输入 URL 到页面渲染过程发生了什么?,我想大家都或多或少能说出一二。但是,其实这个问题很有深度,而你是否回答的有深度,在很大程度上会影响到面试官对你的印象。

    7 个月前
  • (原创)vue-router的Import() 异步加载模块问题的解决方案

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 2、出现问题的代码点 3、替代方案: 把import() 替换成如下: Promise.resolve().then(()=&...

    5 个月前
  • 页面之间传值之url传值-实现点击携参跳转到详情页

    概念图 实现功能: 电影列表页,数据为动态获取服务器数据,点击某个电影后跳转到电影详情页,数据为根据点击的参数去服务器请求对应数据回来填充到页面显示给用户 效果图 电影列表页 电影详情页 思路及...

    2 年前
  • 重拾vue--vue-router进阶

    路由组件传参 HTML5 History模式 导航守卫 路由元信息 过渡效果 name="router",对应class中的router-enter <transition-group ...

    2 年前
  • 通过动态JavaScript值使用的URL。action()

    Felipe OrianiKokila提出了一个问题:Passing dynamic javascript values using Url.action(),或许与您遇到的问题类似。

    3 年前
  • 通过vue-router学习vue

    vue-router是vue官方支持,可以看做vue最佳实践本文大致梳理vue-router源码各个文件大体作用,不深入细节建议对照vue-router源码阅读 src/index.js 1. Vue...

    6 个月前
  • 远程URL文件批量下载打包的方法

    开始 最近代码重构遇到了一个问题,需要把OSS 上的一批图片打包下载 旧服务器的硬盘是直接挂载OSS,所以直接调的Linux系统命令复制打包,所以速度比较快。新服务器重构代码行不通,这样做也不好 查...

    6 个月前
  • 输入URL页面上会发生什么?

    步骤 DNS 解析: 将域名解析成 IP 地址 TCP 连接:TCP 三次握手 发送 HTTP 请求 浏览器向服务器发送HTTP请求 浏览器解析渲染页面 断开连接: TCP 四次挥手 URL是什么...

    4 个月前
  • 输入URL到浏览器显示页面的过程,搜集各方面资料总结一下

    面试中经常会被问到这个问题吧,唉,我最开始被问到的时候也就能大概说一些流程。被问得多了,自己就想去找找这个问题的全面回答,于是乎搜了很多资料和网上的文章,根据那些文章写一个总结。

    2 年前
  • 输入 url 到页面展现的短短几秒内浏览器究竟做了什么?

    面试的时候,我们经常会被问从在浏览器地址栏中输入 url 到页面展现的短短几秒内浏览器究竟做了什么?那么浏览器到底做了啥? 浏览器的多进程架构 一个好的程序常常被划分为几个相互独立又彼此配合的模块,浏...

    2 年前

官方社区

扫码加入 JavaScript 社区