如何解決路由動態傳遞參數。具體例子

實際開發過程中遇到的

對於路由組件傳遞參數

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

這樣你便可以在任何地方使用該組件，使得該組件更易於重用和測試。

參考官方文檔