Vue 路由跳轉方式 和 路由跳轉時傳參

首先先介紹路由跳轉的方法

1、router-link

<router-link to="/path"></router-link>

2、$router方式（js跳轉）

this.$router.push({
	path:'/path',	//路徑
	name:'pathName'	//配置路由時的name
})

以上就是兩種路由跳轉的方法

跳轉時傳參的方法

先說說params和query的不同之處

1.query所傳的參數會顯示在url上，params則不會

2.params傳遞的參數在瀏覽器刷新時會清空，query則不會

1、params

router-link:

<router-link :to="{name:'pathName',params:{title:'title',info:'info'}}"></router-link>

注意！這裏的to前面是有：冒號的

$router方式:

this.$router.push({
	path:'/path',	//路徑
	name:'pathName',	//配置路由時的name
	params:{
		title:'title',
		info:'info'
	}
})

2、query

router-link:

<router-link :to="{path:'/path',query:{title:'title',info:'info'}}"></router-link>

注意！這裏的to前面是有：冒號的

$router方式:

this.$router.push({
	path:'/path',	//路徑
	name:'pathName',	//配置路由時的name
	query:{
		title:'title',
		info:'info'
	}
})

想要了解Vue組件通信，可以看我另一篇文章→ Vue組件通信