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

[Jim-Rae]

前言

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

• 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中，路由传参形式有两种：query 和 params

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