本文講解了VUE專案中路由之間的傳值方式，涉及到的方法都是開發時常用的，希望對大家有多幫助。

1. 方式一：使用router-link標籤 

1.1 params 傳參

• 首先定義好路由
  

  const routes = [
      { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,
      { path :  ‘/about/:id’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } 
  ]

• 在需要跳轉的home元件中使用 router-link 標籤
  

  <router-link :to=」{ name : ’about’ , params : { id : 1} }」>跳轉</router-link>

• 在跳轉到的about元件中拿到傳過來的值
  

  this.$route.params.id

小結：params傳參類似post，路由設定可以為 path : '/about/ : id’或  path : '/about : id’。

注意：如果不設定path的路由地址 :id ，那麼第一次發起請求時可以拿到傳過來的值，但是重新整理之後id會消失；設定了path後重新整理頁面id會保留。

1.2 query傳參

• 首先定義好路由
  

  const routes = [
      { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,
      { path :  ‘/about’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } 
  ]

• 在需要跳轉的home元件中使用 router-link 標籤
  

  <router-link :to=」{ name : ’about’ , query: { id : 1} }」>跳轉</router-link>

• 在跳轉到的about元件中拿到傳過來的值
  

  this.$route.query.id

小結：query傳參類似於get，在url末尾會顯示傳過來的引數，路由地址可不設定。

注意：如果是html取參，用$route.query.id；如果是script取參，用this.$route.query.id。

總結：如果使用params傳參，要在path中設定好路由地址，不然頁面重新整理後傳過來的引數會丟失；如果使用query傳參，則無需再path中設定路由地址，頁面跳轉後重新整理也不會丟失引數。

2. 方式二：使用button按鈕和點選時間@click

2.1 params 傳參

• 首先定義好路由
  

  const routes = [
      { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,
      { path :  ‘/about/:id’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } 
  ]

• 在需要跳轉的home元件中新增一個button按鈕，並增加點選事件
  

  <button @click=」change」>跳轉</button>

• 在change方法中使用this.$router.push進行頁面跳轉
  

  change(){
      this.$router.push({
          name : 「about」 , 
          params : {id : 1}
      })
  }        

• 在about元件中拿到傳過來的值

  this.$route.params.id　

小結：和使用router-link標籤類似，使用params就類似於post方法，需要設定好路由地址:id，才不會在重新整理頁面後丟失資料。

2.2 query傳參

• 首先定義好路由
  

  const routes = [
      { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,
      { path :  ‘/about’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } 
  ]

• 在需要跳轉的home元件中新增一個button按鈕，並增加點選事件

  <button @click=」change」>跳轉</button>

• 在change方法中使用this.$router.push進行頁面跳轉

  change(){
      this.$router.push({
          name : 「about」 , 
          query: {id : 1}
      })
  }

  或者：

  change(){
      this.$router.push({
          path: 「/about」 , 
          query: {id : 1}
      })
  }

• 在about元件中拿到傳過來的值

  this.$route.query.id

小結：和使用router-link標籤類似，使用query就類似於get方法，不需要設定好路由地址:id，重新整理頁面後資料也不會丟失。

總結：如果使用params傳參，要在path中設定好路由地址，不然頁面重新整理後傳過來的引數會丟失；如果使用query傳參，則無需再path中設定路由地址，頁面跳轉後重新整理也不會丟失引數。