在vue里,可以通过url获取地址中的参数
主要有两种形式
第一种形式:以查询字符串的形式传参
<router-link to="/login?name=zs&age=88" tag="span">登录</router-link>
在页面一打开,我们就可以通过$route.query获取参数
created(){
console.log(this.$route.query.name)
}
第二种形式
<router-link to="/login/12/ls">登录</router-link>
配置路由规则时,:相当于动态绑定,可以理解为绑定id=12,name=ls
var router = new VueRouter({
routes: [
{ path: '/login/:id/:name', component: login }
]
})
然后通过params获取参数,也就是$route.params
created(){
console.log(this.$route.params.id)
}
到这里要注意一下,看到$route会想到 $router,其实这两个是两码事
$router的原型是VueRouter,整个项目只有一个VueRouter实例,使用 $router是实现路由跳转的, 比如 $router.push()。
跳转成功后,抵达某一个页面,此时要获取从上一个页面传递过来的参数,此时使用 $route。或者是 $route.query.city,或者是 $route.params.city。也就是说, $router和 $route作用在路由不同的阶段。
关于参数传递更多的内容和使用会在以后进行完善,这里就先简单写到这里