Automatically bind vue-router query to vm instance

by Vue.js Examples

vue-route-props

Automatically bind vue-router query to vm, APIs are mostly same as the Vue props.

View Demo View Github

Install

npm install vue-route-props
yarn 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

import Vue from "vue";
import VueRouter from "vue-router";
import * as VueRouteProps from "vue-route-props";

Vue.use(VueRouter);
Vue.use(VueRouteProps);

new Vue({
  routeProps: {
    optional: {
      type: String,
      default: "an optional routeProp with default value",
    },
    required: {
      required: true,
      type: String,
    },
    multiple: {
      type: [String, Array, Object],
    },
    validator: {
      validator(value) {
        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.push({
  query: {
    willBeString: 0, // wrong, there will be an error occurs
    willBeNumber: JSON.stringify(0), // expected, the willBeNumber is bind with 0 now
  },
});

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.use(VueRouteProps, {
  inspect: true,
});

new 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.use(VueRouteProps, {
  debug: true,
});

GitHub