快捷導(dǎo)航

vue-router中query和params的區(qū)別解析

更新時間：2022年10月18日 14:34:33 作者：堅(jiān)強(qiáng)的小螞蟻

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用，這篇文章主要介紹了vue-router中query和params的區(qū)別 ,需要的朋友可以參考下

認(rèn)識vue-router

目前前端流行的三大框架，都有自己的路由實(shí)現(xiàn)：

Angular的ngRouter
React的ReactRouter
Vue的vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用。
我們可以訪問其官方網(wǎng)站對其進(jìn)行學(xué)習(xí)：https://router.vuejs.org/zh/

vue-router是基于路由和組件的

路由用戶設(shè)定訪問路徑的，將路徑和組件映射起來。
在vue-router的單頁面應(yīng)用中，頁面的路徑的改變就是組件的切換

一. query和params的知識點(diǎn)理解

/data/:id這個路由匹配/data/1,/data/2這里的 id 叫 params

/data?id=1 /data?id=2 這里的 id 叫 query

params方法傳參時，要在路由后面加參數(shù)名，并且傳參時，參數(shù)名要跟路由后面設(shè)置的參數(shù)名對應(yīng)。
query方法，就沒有這種限制，直接在跳轉(zhuǎn)里面用就可以。

二. query和params的使用方法

1.使用params傳參，路由配置的時候path要帶上動態(tài)參數(shù)

{
   path: '/detail/:id/',
   name: "detail",
   component: detail//這個details是傳進(jìn)來的組件名稱
 }
 
使用： 
方法1：<router-link :to="{ name: 'details', params: { id: 123 }}">點(diǎn)擊按鈕</router-link>
方法2：this.$router.push({name:'details',params:{id:123}})
頁面url顯示結(jié)果是：http://localhost:8081/#/details/123

params跳轉(zhuǎn)方式：

注意：如果提供了 path，params 會被忽略，所以可以使用以下兩種方式：
寫法一：this.$router.push('/detail/${this.$route.params.id}')
寫法二：this.$router.push({name:'detail',params:{id:123}})

2. 使用query傳參，路由配置的時候path不用帶參數(shù)

{
   path: '/detail',//這里不需要參入?yún)?shù)，參見上面的params寫法
   name: "detail",
   component: detail//這個details是傳進(jìn)來的組件名稱
 }
 
使用： 
方法1：<router-link :to="{ name: 'details', query: { id: 123 }}">點(diǎn)擊</router-link>
方法2：this.$router.push({name:'details',query:{id:123}})
 
方法3：<router-link :to="{ path: 'details', query: { id: 123 }}">點(diǎn)擊</router-link>
方法4：this.$router.push({path:'details',query:{id:123}})
頁面url顯示結(jié)果是：http://localhost:8081/#/details?id=123

query跳轉(zhuǎn)方法：