首页 IT程序员内容详情

Vue 页面跳转与参数传递

2021-05-06 10199 小付

标签跳转

1、不带参数跳转

<router-link to="/about">
	<button>跳转到关于我们</button></router-link>
 <router-link :to="{path: '/about'}">
	<button>跳转到关于我们</button></router-link>

2、带参数跳转

<router-link :to="{path: '/about', query: {name:'ming', age: 18 }}">
	<button>跳转到关于我们</button></router-link>
 <router-link :to="{name: 'about', params: {name:'ming', age: 18 }}">
	<button>跳转到关于我们</button></router-link>

3.接收参数

// 以query方式接收参数:【query传递数据是通过URL传递的,类似ajax中的get方式】console.log(this.$route.query.name);    // mingconsole.log(this.$route.query.age);     // 18 // 以params方式接收参数:【params方式,类似ajax中的post方式】console.log(this.$route.params.name);    // mingconsole.log(this.$route.params.age);     // 18

编程式路由跳转: this.$router.push()

1、不带参数跳转

<button @click="jump">跳转到关于我们</button>jump() {
	this.$router.push('/about');
}

2、带参数跳转

//query方式<button @click="jump1">跳转到关于我们</button>jump1() {  
	this.$router.push({
		path: '/about',
		query: {
			name: "ming",
			age: 18
		}
	});}//⚠️注:如果要传递的参数很长时,请用params方式,因为query方式是通过URL传递的,而URL传参数长度是有限制的哦!!//params方式<button @click="jump2">跳转到关于我们</button>open2() {
	this.$router.push({
		name: "about", // ⚠️注:这里不能用path路径,只能用name【请对照router.js中的路由规则中的name项】,否则取不到传过去的数据		params: {
			name: "ming",
			age: 18
		}
	});}

转载于:

相关标签: # vue

 暂无评论,快来抢沙发吧~

发布评论