2019年8月24日
使用query方式传递参数
<router-link to="/login?id=10&name=zs">登录</router-link>
?后就是需要传递的参数
在login模块中添加created函数
var login={
template:'<h1>登录---{{$route.query.id}}---{{$route.query.name}}</h1>',
data(){
return{
msg:'123'
}
},
created(){
console.log(this.$route)
console.log(this.$route.query.id)
}
}
此时参数存在于$route.query内部 用插值表达式即可将参数绑定到页面上
使用parms传递参数
先设置路由的匹配规则
var router=new VueRouter({
routes:[
{path:'/login/:id',component:login},
{path:'/register',component:register}
]
})
这里/login后面的 :id 的意思是将/login后面获得的参数存储至id中
此时通过URL传递id
<router-link to="/login/10">登录</router-link>
params中就接收到了参数
路由规则是根据matched来解析的
这里的matched将路由规则解析成了正则表达式
使用$route.params.id就可以拿到参数
{path:'/login/:id/:name',component:login}
这样可以进行两个参数的传递
<router-link to="/login/10/zs">登录</router-link>
但是页面必须拿到两个参数之后才能载入login组件