版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83827530
在项目开发中，需要用到路由传参的地方往往很多，比如说根据新闻列表页面查询新闻详情，此时我们就需要将该条新闻的id信息传递给新闻详情页面。
而在vue-router中，传参所用的关键字为query，其后跟参数map对象。
示例
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
</head>
<body>
<template id="root">
<div>
<!--路由占位-->
<router-view></router-view>
</div>
</template>
<template id="register">
<div>
<h2>注册页面</h2>
<input type="text" v-model="uname">
<button @click="registerMethod">注册</button>
</div>
</template>
<template id="login">
<div>
<h2>登录页面</h2>
<input type="text" placeholder="请输入登录账号" v-model="loginName">
<button @click="loginMethod">登录</button>
</div>
</template>
<template id="welcome">
<div>
<h2>欢迎界面</h2>
<h3 v-show="currentUser != ''">{{currentUser}}</h3>
</div>
</template>
<div id="app">
<router-link to="/root/register">注册</router-link> |
<router-link to="/root/login">登录</router-link>
<!--路由占位-->
<router-view></router-view>
</div>
</body>
<script src="../../../js/vue/vue/2.0/vue.js"></script>
<script src="../../../js/vue/vue-router/2.3.1/vue-router.js"></script>
<script type="application/javascript">
//定义路由根组件
var App = Vue.extend({});
//根页面
var root = Vue.extend({
template:'#root'
});
//欢迎页面
var welcome = Vue.extend({
template:'#welcome'
,data(){
return {
uname:''
,currentUser:''
}
}
,created(){
//接收传过来的参数，将其存放到本地数据域uname中
this.uname = this.$route.query.uname;
//排除非空可能
if(this.uname != '' && this.uname != 'undefined' && this.uname != undefined){
this.currentUser = '欢迎您:' + this.uname + "！"
}
}
});
//定义register页面
var register = Vue.extend({
template:'#register'
,data(){
return {
uname:''
}
}
,methods:{
registerMethod(){
alert('注册成功！用户名为：' + this.uname);
//跳转到登录页面
this.$router.push({path:'/root/login',query:{uname:this.uname}});
}
}
});
//定义login页面
var login = Vue.extend({
template:'#login'
,data(){
return {
uname:''
,loginName:''
}
}
,created(){
//接收传过来的参数，将其存放到本地数据域uname中
this.uname = this.$route.query.uname;
}
,methods:{
loginMethod(){
//如果没有输入任何信息，则提示输入账号。
if(this.loginName.trim() == ''){
alert('请输入登录账号！');
return;
}
//如果填写的登录名与注册的账号相一致，则登录成功！
if(this.uname == this.loginName){
alert('登录成功！');
//登录成功后跳转到欢迎界面
this.$router.push({path:'/root/welcome',query:{uname:this.loginName}});
} else {
alert('登录失败！');
}
}
}
});
//设定路由规则
var router = new VueRouter({
routes:[
{
path:'/'
,redirect:'/root/welcome'
}
,{
path:'/root'
,component:root
,children:[
{
path:'register'
,component:register
}
,{
path:'login'
,component:login
}
,{
path:'welcome'
,component:welcome
}
]
}
]
});
//开启路由
new Vue({
el:'#app'
,router:router
});
</script>
</html>
结果
分析
上面的代码实现的功能是，当我们访问首页路径/时，其自动跳转到欢迎界面/root/welcome。
当我们点击注册链接时，其会跳转到注册界面，我们在注册界面注册好用户账号后其会自动跳转到登录界面，在跳转的过程中，它会将我们在此之前注册的账号传递给登录界面，在登录界面中，如果我们填写上正确的账号后，其会直接跳转到欢迎界面，如果填写错误，其会弹出错误信息。
当我们再次跳转回欢迎界面后，其会将登录页面中的用户账号直接给带过来，并且在欢迎界面中展示出欢迎您:张三！
这里需要注意的是，参数的传递用的是query，比如说传递用户账号，其传参用的就是query:{uname:this.uname}。
而在被跳转到的页面，我们使用this.$route.query.uname来接收跳转之前页面传递过来的参数。
而页面的跳转用到的是$router.push，比如说上面的代码this.$router.push({path:'/root/welcome',query:{uname:this.loginName}});就是跳转到欢迎界面，同时将登录界面中的用户登录名传递过去。