vue-route-sync-mixin

What is vue-route-sync-mixin

Vue-route-sync-mixin 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

• :tada: The implementation of url and data two-way binding, this is really exciting
• :sparkles: Non-invasive to legacy project logic and components
• :chart_with_upwards_trend: Simple configuration, faster to use
• :rocket: Only depends on the vue-router
• :fire: More features is waiting for you to discover...

Installation

 $ npm install vue-route-sync-mixin

Usage

Single File Component Example:

 <script>
+ import {createRouteSyncMixin} from 'vue-route-sync-mixin'

export default {
  // initial url would be http://xxx/#/?ps=1__10&pn=1__1
+ mixins: [createRouteSyncMixin({ps: 'pagination.pageSize',pn: 'pagination.pageNum'})],
  data() {
    return {
      pagination: {
        pageSize: 10,
        pageNum: 1
      }
    }
  }
}
</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.