vue 動态路由傳參三種方式

1. // 直接調用$router.push 實作攜帶參數的跳轉 this.$router.push({

   path: `/describe/${id}`,

   需要對應路由配置如下：

   

   { path: '/describe/:id',

   name: 'Describe',

   component: Describe

   }

   //擷取參數方法

   this.$route.params.id

   

2. this.$router.push({ name: 'Describe',

   params: {

   id: id

   }

   })

   路由配置：

   

   //這裡可以添加:/id 也可以不添加，不添加資料會在url後面顯示，不添加資料就不會顯示 {

   path: '/describe',

   //擷取參數

   this.$route.params.id

   

3. 

   //query傳遞的參數會顯示在url後面?id=？ this.$router.push({

   path: '/describe',

   query: {

   

   對應路由配置：

   

   { path: '/describe',

   this.$route.query.id

   注意：

   在子元件中 擷取參數的時候是$route.params 而不是

   $router 這很重要~~~