如何解决路由动态传递参数。具体例子

实际开发过程中遇到的

对于路由组件传递参数

 {
  path: 'detail/:movieId',
    components: {
    detail: () => import('@/views/movie/detail.vue'),
    }
 }

对于上面这种写法， 我们可以在传递过去的组件中，直接使用this.$route.params.movieId接受参数。通过查阅资料，有一定的缺陷。
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
故我们可以采取props将路由组件解偶。

{
  path: 'detail/:movieId',
    components: {
      detail: () => import('@/views/movie/detail.vue'),
    },
    props: {
      detail: true
    }
}

组件接收方式

export default {
  name: "detail",
  props: ['movieId'],
  components: {
    Header
  },
  mounted() {
    // 这种方式也可以传递id过来，在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
    // console.log(this.$route.params.movieId)
    console.log(this.movieId)
  },
}

这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试。

参考官方文档

标签：movieId,route,detail,例子,参数,props,组件,路由
来源： https://www.cnblogs.com/yaogengzhu/p/10914691.html