vue-route-sync-plugin2

What is vue-route-sync-plugin2

vue-route-sync-plugin2 is a Vue implementation of DeepLinking solution. It uses a simple way to implementing "two-way binding" between url query and vm data.

It's awesome that we can synchronize the page state to the url in real time, so we can share the page state by sharing the URL, like share the search results on page 4 of the search keyword teeeemoji.

Features

• 🎉 The implementation of url and data two-way binding, this is really exciting
• ✨ Non-invasive to legacy project logic and components
• 📈 Simple configuration, faster to use
• 🚀 Only depends on the vue-router
• 🔥 More features is waiting for you to discover...

Installation

$ npm install vue-route-sync-plugin2

Usage

Single File Component Example:

Support for local configuration

+ main.js
import {routerSyncPlugin} from 'vue-route-sync-plugin2'
Vue.use(routerSyncPlugin)

+ component
<script>
export default {
  data() {
    return {
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      routeSync: {
          ps: "pagination.pageSize",
          pn: "pagination.pageNum",
      }
    };
  }
};
</script>

API

createRouteSyncMixin

src/index.js:16-44

A series of mixins is automatically generated for the url synchronization function

Parameters

• options {{}} A map of $route.query keys to vm's property path
  • options.KeyOfOptions {string} Key of options is the value key on url query string, and its also the key in vm.$route
  • options.ValueOfOptions {string} Value of options is a path to find the actual value in vm

Returns {} A series of mixins

processEscapeStr2Value

src/index.js:54-54

• See: https://www.npmjs.com/package/js-type-escape#processescapestr2value

process escape string to value with its data type

Parameters

• str {string}

Returns (string | any | undefined | number)

processValue2EscapeStr

src/index.js:64-64

• See: https://www.npmjs.com/package/js-type-escape#processvalue2escapestr

process value to escape string

Parameters

• val {any}

Returns string

TODO

• write demo

License

This project is licensed under the MIT license.