vue-route-props
Automatically bind vue-router query to vm, APIs are mostly same as the Vue props.
Install
npm install vue-route-propsyarn add vue-route-props
Why
In order to make route stateful
(e.g, let user to copy one route, and paste in another tab), in this way you need to pass query
instead of params. vue-route-props is implemented it which is much of the same in vue props.
Usage
;;; Vue;Vue; routeProps: optional: type: String default: "an optional routeProp with default value" required: required: true type: String multiple: type: String Array Object validator: { return value === "with custom validator"; } ;
API
vm
Prop Types
In order to keep values' type, you need to ALWAYS use JSON.stringify
to insert query:
this$router;
Options
Inspect mode
Since we bind routeProps to vm's root instead of data/computed, and so on, You cannot use the vue-dev-tools to inspect what value it is.
In order to inspect routeProps, you can enable inspect mode. we will log all routeProps when it is updated.
Vue;
routeProps: prop: type: String default: "a default value" ; /*console: [VueRouteProps info]: { prop: "a default value"}*/
Debug mode
In general, we log errors while environment is not in production mode. you can override it with debug mode.
Vue;