vue 路由传参--props

一般处理组件中路由器参数的方式采用$router传值

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

接受路由参数

export default {
  mounted(): {
    thid.$route.params.id
  }
}

但是这样在组件内部使用 $route 会对某个URL产生强耦合，这限制了组件的灵活性。
正确的解决方案是向路由器添加props。

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

这样，组件可以直接从props获取 params。

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