Vue路由的传参与取参
概述
1. 查询参数
配置（传参） :to="{name:'login',query:{id:loginid}}"
获取（取参） this.$route.query.id
2.路由参数
配置（传参）
:to="{name:'register',params:{id:registerid} }"
配置路由的规则 { name:'detail',path:'/detail/:id'}
获取 this.$route.params.id
总结：
1.:to传参的属性里 params是和name配对的 query和name或path都可以
2.使用路由参数必须要配置路由规则里面配置好参数名，否则刷新页面参数会丢失
代码1
var Login={
template:`
我是登录页面
这是我获取到的参数： {{ msg }}
`,
data(){
return {
msg:''
}
},
created(){
this.msg=this.$route.query.id
}
}
var Restiger={
template:`
我是注册页面
这是我获取到的路由参数：{{ restigerfoo }}
`,
data(){
return {
restigerfoo:''
}
},
created(){
this.restigerfoo=this.$route.params.foo
}
}
//安装路由插件
Vue.use(VueRouter);
//创建路由对象
var router= new VueRouter({
//配置路由对象
routes:[
{path:'/login',name:'login',component:Login},
{path:'/restiger/:foo',name:'restiger',props:true, component:Restiger},
]
})
new Vue({
el:'#app',
router,
template:`
去登录
|
去注册
代码2
var Login={
template:`
我是登录页面
这是我获取到的参数： {{ msg }}
`,
data(){
return {
msg:''
}
},
created(){
this.msg=this.$route.query.id
}
}
var Restiger={
template:`
我是注册页面
这是我获取到的路由参数：{{ foo }}
`,
props:['foo']
}
//安装路由插件
Vue.use(VueRouter);
//创建路由对象
var router= new VueRouter({
//配置路由对象
routes:[
{path:'/login',name:'login',component:Login},
{path:'/restiger/:foo',name:'restiger',props:true, component:Restiger},
]
})
new Vue({
el:'#app',
router,
template:`
去登录
|
去注册
运行效果
