vue路由解耦

你好，阅读文章的大哥，vue路由都会用吧！但是你知道路由如何写才能保证多路由模块解耦，保证更方便增加新的路由模块吗？

加一个5级标题再说明一下：为什么要路由解耦？

（请认真读完这些话）
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

对路由参数的改变不需要通过this.$route去获取了，而是通过props来获取，解决通过watch监听$route和通过beforeRouteUpdate传值时通过$route.params获取参数改变时麻烦的写法：
只适用于pramas，不适用于query；

实现方式：

1.在路由的配置项加一个props：true；

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import User from "./components/User.vue";

Vue.use(Router);

export default new Router({
  mode: "hash",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/user/:id",
      component: User,
      props: true
    }
  ]
});

2.在需要接收路由参数的组件中通过props进行接收，例如：pros:[“属性”,“属性”]

<template>
    <div>{{id}}</div>
</template>
<script>
export default {
  name: "user",
  props: ["id"]
};
</script>

3.效果
User 组件通过输入属性，就能访问路由参数。不需要再通过this.$route.params，来访问路由参数。