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.
- 🎉 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...
$ npm install vue-route-sync-mixin
<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>
A series of mixins is automatically generated for the url synchronization function
options
{{}} A map of $route.query keys to vm's property pathoptions.KeyOfOptions
{string} Key of options is the value key on url query string, and its also the key in vm.$routeoptions.ValueOfOptions
{string} Value of options is a path to find the actual value in vm
Returns {} A series of mixins
process escape string to value with its data type
str
{string}
Returns (string | any | undefined | number)
process value to escape string
val
{any}
Returns string
- write demo
This project is licensed under the MIT license.