vue中params和query的差別及路由傳參的三種基本方式

待寫

待寫

query

query通過 router-link或者this.$router.push跳轉頁面傳參數

第一種方式 router-link

name和path都可以用,to的取值可以是對象的方式也可以是字元串的方式

<router-link :to="{ name: 'W', query: { id:'1234'，age:'12' }}"/>
<router-link :to="{ path: '/W/s', query: { id:'1234',age:'12' }}"/>
<router-link to="'/W/s/?id=1234&age=12'">使用者</router-link>
           

第二種方式 this.$router.push

this.$router.push({path:'/W/s', query: {id:'1234', age: 12}})
this.$router.push({path:'/W/s?id=1234&age=12'})
           

對應的router編寫

name和path都可以來比對對應的跳轉元件

{
	path: '/W/s', 
	name: 'W', 
	component: W
}
           

形成的頁面路徑

http://localhost:8080/#/W/s?id=1234&age=12
           

query接受傳遞的參數取值

this.$route.query.id
this.$route.query.age
           

params

query通過 router-link或者this.$router.push跳轉頁面傳參數

第一種方式 router-link

注意：使用router-link不能用path隻能用name或者to字元串拼接,不然會直接無視掉params中的内容

<router-link :to="{ name: 'W', params: { id:'1234'，age:'12' }}"/>
<router-link to="/W/s/1234/12"/>
           

第二種方式 this.$router.push

這種方式說是頁面重新整理資料，資料會丢失（待驗證）
this.$router.push({name:'W',params: {id: 1234,age:'12'}})
this.$router.push({path:'/W/s/1234/12'})
           

對應的router編寫

name和path都可以來比對對應的跳轉元件

{
	path: '/W/s/:id/:age', 
	name: 'W', 
	component: W
}
           

形成的頁面路徑

http://localhost:8080/#/W/s/1234/12
           

query接受傳遞的參數取值

this.$route.params.id
this.$route.params.age
           

params和query的差別

雖然query使用path或者name引入都可以，但是params隻能使用name來引入，接受參數類似，分别是this.$route.query.id和this.$route.params.id
query拼接的路徑，類似是get請求