技術標籤：學習筆記vue.js專案實戰javascriptvue.js前端webpack

vue實戰總結（三）

vue點選跳轉，傳遞引數給下一個頁面

• 一：路由屬性配置傳參

  this.$router.push({
      path:"/detail/${item.id}",
  })    
  

  這個元件對應的路由配置

  {
    path: '/detail',
    name: 'detail',
    hidden: true,
    meta: {
      name: '聯絡人詳情',
      icon: 'deatil'
    },
    component: () => import
   
  ('../views/Detail/Index.vue')
  }
  

通過路由屬性配置傳參我們可以用 this. r o u t e . p a r a m s . i d ∗ ∗ 來 獲 取 到 i d 的 值 。 而 且 ∗ ∗ t h i s . route.params.id** 來獲取到 id 的值。 而且 **this. route.params.id∗∗來獲取到id的值。而且∗∗this.router.push 方法裡面路徑帶的是值，路由配置項那裡帶的是變數名(屬性名)來實現的對應。

• 二： params 傳參

  this.$router.push({
      name:"detail"
   
  ,
  　　　　//這裡的params是一個物件，id是屬性名，item.id是值(可以從當前元件或者Vue例項上直接取)
      params:{id:item.id}
  })    
  

  對應的路由配置

  {
    path: '/detail',
    name: 'detail',
    hidden: true,
    meta: {
      name: '聯絡人詳情',
      icon: 'deatil'
    },
    component: () => import('../views/Detail/Index.vue')
  }
  

通過 params 傳遞引數，如果我們想獲取 id 的引數值，可以通過 this.$route.params.id

另外獲取引數的時候是 $ r o u t e route route，跳轉和傳參的時候是 $router。

以上兩種傳參方式基本上可以理解為 ajax 中的 post 請求方式，引數都是不可見的，但是上面兩種方法都有一個弊端，就是當頁面重新整理了是獲取不到引數值的，那麼有沒有一種方法是頁面重新整理之後引數依然存在呢？ 下面是用query傳參

• 三：query 傳參

  this.$router.push({
  	path:"/detail",
  	query:{id：item.id}
  })
  

  //這個元件對應的路由配置

  {
    path: '/detail',
    name: 'detail',
    hidden: true,
    meta: {
      name: '聯絡人詳情',
      icon: 'deatil'
    },
    component: () => import('../views/Detail/Index.vue')
  }
  

通過 query 傳參，如果我們想獲取 id 的引數值，可以通過 this.$route.query.id。

用 query 傳參可以解決頁面重新整理引數消失問題，引數是直接在 url 後面新增的，引數是可見的。

• 四：使用localStorage

  localStorage.setItem("id", JSON.stringify(this.id));
  

  this.id= JSON.parse(localStorage.getItem("id"));