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组件通信