其他分享
首页 > 其他分享> > 如何解决路由动态传递参数。具体例子

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

作者:互联网

实际开发过程中遇到的

对于路由组件传递参数

 {
  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