Vue 页面跳转与参数传递

亦凉 2023-07-20 05:48 18阅读 0赞

## 标签跳转 ##

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);    // ming
    console.log(this.$route.query.age);     // 18
     
    // 以params方式接收参数：【params方式，类似ajax中的post方式】
    console.log(this.$route.params.name);    // ming
    console.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
    		}
    	});
    }

3、接收参数

//⚠️注：在传递参数时，用什么方式传参，就用什么方式接收！！
    // 以query方式接收参数：【query传递数据是通过URL传递的，类似ajax中的get方式】
    console.log(this.$route.query.name);    // ming
    console.log(this.$route.query.age);     // 18
    
    // 以params方式接收参数：【params方式，类似ajax中的post方式】
    console.log(this.$route.params.name);   // ming
    console.log(this.$route.params.age);    // 18
     
    // this.$route 路由信息对象
    console.log(this.$route);  //this.$route 对象中包涵了路由的相关信息，请自看！！