路由参数解耦

一般在组件内使用路由参数，大多数人会这样做：

export default {
  methods: {
    getParamsId() {
      return this.$route.params.id
    },
  },
}

在组件中使用$route会使之与其对应的路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
正确的的做法使通过’props’解耦

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      compoment: User,
      props: true,
    },
  ],
})

将路由的’props’属性设置为’true’后，组件内可通过’props’接收到’pramas’参数

export default {
  props: ['id'],
  methods: {
    getParamsId() {
      return this.id
    },
  },
}

另外还可以通过函数模式来返回’props’

const router = new VueRouter({
  routes: [
    path: '/user/:id',
    component: User,
    props: (route) => {
      return {
        id: route.query.id
      }
    }
  ]
})

文档：https://router.vuejs.org/zh/guide/essentials/passing-props.html