一、query和params的知識(shí)點(diǎn)理解
- /data/:id這個(gè)路由匹配/data/1,/data/2這里的 id 叫 params
- /data?id=1 /data?id=2 這里的 id 叫 query
params方法傳參的時(shí)候酸钦，要在路由后面加參數(shù)名，并且傳參的時(shí)候滚朵，參數(shù)名要跟路由后面設(shè)置的參數(shù)名對(duì)應(yīng)。
query方法前域，就沒有這種限制辕近，直接在跳轉(zhuǎn)里面用就可以。
二匿垄、query和params的使用方法
- 使用params傳參移宅，路由配置的時(shí)候path帶上參數(shù)
{
path: '/detail/:id/',
name: "detail",
component: detail//這個(gè)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 會(huì)被忽略椿疗，所以可以使用以下兩種方式：
- 寫法一：this.$router.push('/detail/${this.$route.params.id}')
- 寫法二：this.$router.push({name:'detail',params:{id:123}})
- 使用query傳參吞杭，路由配置的時(shí)候path不用帶參數(shù)
{
path: '/detail',//這里不需要參入?yún)?shù)，參見上面的params寫法
name: "detail",
component: detail//這個(gè)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)方法：
- 寫法一：this.$router.push('/detail?id=${this.$route.query.id}');
- 寫法二：this.$router.push({path:'detail',query:{id:123}})
- 要是想獲取參數(shù)值：各自的獲取方法是：
query和params分別是：this.$route.query.id变丧，this.$route.params.id
三芽狗、query和params在瀏覽器地址的顯示方式
- params在瀏覽器地址欄中不顯示參數(shù)名稱
http://47.107.171.252:8001/#/detail/123456 - query在瀏覽器地址欄中顯示參數(shù)名稱
http://47.107.171.252:8001/#/detail?id=123456
