zoukankan      html  css  js  c++  java
  • 如何解决路由动态传递参数。具体例子

    实际开发过程中遇到的

    对于路由组件传递参数

     {
      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)
      },
    }
    

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

    参考官方文档

  • 相关阅读:
    JS异错面试题
    CSG
    OBS工具汇总
    SFS OBS
    zookeeper配置文件
    zookeeper概念
    centos yum源问题三板斧
    nexus仓库
    SVN备份恢复
    ubuntu
  • 原文地址:https://www.cnblogs.com/yaogengzhu/p/10914691.html
Copyright © 2011-2022 走看看