vue-url-persist

简介

这是一个将 vue data 中的响应式数据序列化到 URL 上的库，并能根据 URL 上的数据解析到 data 数据中。

使用

<template>
  <div class="form1">
    <div>
      <label for="keyword">搜索名:</label>
      <input type="text" v-model="form.keyword" id="keyword" />
    </div>
    <div>
      <input
        type="checkbox"
        v-model="form.hobbyList"
        id="anime"
        value="anime"
      />
      <label for="anime">动画</label>
      <input type="checkbox" v-model="form.hobbyList" id="game" value="game" />
      <label for="game">游戏</label>
      <input
        type="checkbox"
        v-model="form.hobbyList"
        id="movie"
        value="movie"
      />
      <label for="movie">电影</label>
    </div>
    <p>
      {{ form }}
    </p>
  </div>
</template>

<script>
import { generateInitUrlData } from 'vue-url-persist'

export default {
  name: 'Form1',
  mixins: [generateInitUrlData('form')],
  data() {
    return {
      form: {
        keyword: '',
        hobbyList: []
      }
    }
  }
}
</script>

注意：如果使用子路由，请务必设置 :key="$route.path"

<template>
  <div class="form2">
    <header>
      <RouterLink to="/form2/1">第一个 Tab</RouterLink>
      <RouterLink to="/form2/2">第二个 Tab</RouterLink>
    </header>
    <!--如果有子路由则必须设置该属性-->
    <RouterView :key="$route.path" />
  </div>
</template>

依赖

依赖于 vue/vue-router，请自行在项目中添加这两个依赖。