router-link 中的query 和params的區別

 

跳轉到不同的url，但這個方法會向history棧添加一個記錄，點擊后退會返回到上一個頁面。

1、this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})     

 　　獲取參數 {{this.$route.query.id}}

2、this.$router.push({name: 'detail',params:{id: 'abc'}})

　　獲取參數：{{this.$route.params.id}}

 

query和params 的區別：

1.用法上

　　query要用path來引入，params要用name來引入。

2.展示上的

　　query更加類似於我們ajax中get傳參，params則類似於post，說的再簡單一點，前者在瀏覽器地址欄中顯示參數，后者則不顯示。

const routes = [
  { name: 'users', path: '/users/:id', component: Users },
  { path: '/books', component: Books }
]

// params使用場景
router.push('/users/123') // 跳轉時
router.push({ // 另一種方式跳轉
  name: 'users',
  params: {
    id: 123
  }
})

// 獲取id
route.params.id // 123
// 實際URL地址 => localhost:8080/users/123


// query使用場景
router.push('books?q=123') // 跳轉時
router.push({ // 另一種方式跳轉
  path: '/books',
  query: {
    q: 123
  }
})

// 獲取query
route.query.q // 123
// 實際URL地址 => localhost:8080/books?q=123

 

參考地址：

https://www.cnblogs.com/jiajiamiao/p/11609335.html

http://www.imooc.com/wenda/detail/517721