亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié)

 更新時(shí)間:2023年11月21日 10:09:20   作者:寶子向前沖  
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)及傳參的多種方法小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

路由跳轉(zhuǎn)的三種方法

1.path路徑跳轉(zhuǎn)

傳值可以使用params傳值和query傳值 (缺點(diǎn):不能傳引用數(shù)據(jù)類(lèi)型-數(shù)組,對(duì)象等)

//寫(xiě)法1
<router-link to="/artlist">小說(shuō)列表</router-link> 
//router-link解析出來(lái)其實(shí)是a標(biāo)簽
//路由配置
export default new VueRouter({
  routes: [
    {
      path: "/artlist",
      component: ArtList,
    }
  ]
});
//寫(xiě)法2
<router-link :to="path1">小說(shuō)列表</router-link> 
//寫(xiě)法3
<router-link :to="'/artlist'">小說(shuō)列表</router-link> 
...
data() {
	return{
		path1:'/artlist'
	}
}
//但是還需要進(jìn)行路由配置
export default new VueRouter({
  routes: [
    {
      path: "/artlist",
      component: ArtList,
    }
  ]
});

2.編程式路由 this.$router.push()

 (最常用的,不受時(shí)機(jī)、條件的限制)。
傳值可以用params 傳值和query傳值
(優(yōu)點(diǎn):可以傳基本數(shù)據(jù)類(lèi)型和數(shù)組,對(duì)象)

jumpHome() {
        this.$router.push({
            path:"/home",
            query:{
            	id:this.id
            }
        })
      }
 ...
 //接收值如果進(jìn)入另一個(gè)頁(yè)面,一般在created中接收
 this.$route.query.id
 //路由配置
 { 
     path: "/home", 
     component: ()=>import("../Home")
 }
  //或者name和params搭配,接收值 this.$route.params.id

3.命名式路由跳轉(zhuǎn)(name)

傳值可以使用params和query傳值
(優(yōu)點(diǎn):可以傳基本數(shù)據(jù)類(lèi)型和數(shù)組,對(duì)象)

<router-link :to="{name:'shop',query:{city:cityObj}}">購(gòu)物車(chē)</router-link> 
...
//路由配置
{
	path:'/shop',
	//該path路徑不能少。因?yàn)槊铰酚商D(zhuǎn)是通過(guò)name找到該path
	name:'shop',
	component:Shop
}

路由傳參的三種方法

一、params傳參

this.$router.push({ 
	name:"admin",    
	//這里的params是一個(gè)對(duì)象,id是屬性名,item.id是值(可以從當(dāng)前組件或者Vue實(shí)例上直接取) 
	params:{id:item.id} 
}) 
//這個(gè)組件對(duì)應(yīng)的路由配置 
{  
	//組件路徑 
	path: '/admin',  
	//組件別名 
	name: 'admin',  
	//組件名 
	component: Admin, 
} 

通過(guò)params傳遞參數(shù),如果我們想獲取 id 的參數(shù)值,可以通過(guò) this.$route.params.id 這種方式來(lái)打印出來(lái)就可以得到了;

注意:獲取參數(shù)的時(shí)候是 $route,跳轉(zhuǎn)和傳參的時(shí)候是 $router

二、路由屬性配置傳參:

this.$router.push({
	name:"/admin/${item.id}", 
}) 
//這個(gè)組件對(duì)應(yīng)的路由配置 
{   
	//組件路徑 
	path: '/admin:id',   
	//組件別名 
	name: 'admin',   
	//組件名 
	component: Admin, 
}

通過(guò)路由屬性配置傳參我們可以用 this.$route.params.id 來(lái)獲取到 id 的值,

注意: this. $router.push 方法里面路徑帶的是值,路由配置項(xiàng)那里帶的是變量名(屬性名)來(lái)實(shí)現(xiàn)的對(duì)應(yīng);

以上兩種傳參方式基本上可以理解為 ajax 中的 post 請(qǐng)求方式,參數(shù)都是不可見(jiàn)的,但是上面兩種方法都有一個(gè)弊端,就是當(dāng)頁(yè)面刷新了是獲取不到參數(shù)值的,那么有沒(méi)有一種方法是頁(yè)面刷新之后參數(shù)依然存在呢?

三、query傳參

this.$router.push({ 
	name:"/admin",     
	query:{id:item.id} 
}) 
//這個(gè)組件對(duì)應(yīng)的路由配置 
{   
	//組件路徑 
	path: '/admin',   
	//組件別名 
	name: 'admin',   
	//組件名 
	component: Admin, 
}

第三種方式是用 query 來(lái)傳參,這種方式是可以解決頁(yè)面刷新參數(shù)消失問(wèn)題的,這種方式可以理解為是 ajax 中的 get 方法,參數(shù)是直接在 url 后面添加的,參數(shù)是可見(jiàn)的,所以解決頁(yè)面刷新參數(shù)消失問(wèn)題建議使用此方法來(lái)解決;

區(qū)別

(1)params傳參

  • 只能用 name,不能用 path。
  • 地址欄不顯示參數(shù)名稱(chēng) id,但是有參數(shù)的值。

(2)query傳參

  • name 和 path 都能用。用 path 的時(shí)候,提供的 path 值必須是相對(duì)于根路徑的相對(duì)路徑,而不是相對(duì)于父路由的相對(duì)路徑,否則無(wú)法成功訪(fǎng)問(wèn)。
  • 地址欄顯示參數(shù)格式為?id=0&code=1

到此這篇關(guān)于Vue中的路由跳轉(zhuǎn)及傳參的多種方法的文章就介紹到這了,更多相關(guān)vue路由跳轉(zhuǎn)傳參內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論