本文講解了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中配置路由地址，頁面跳轉後刷新也不會丟失參數。