版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/alokka/article/details/84307161
1.query传参:
1.query传参
路由:
var router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ name:'register',path: '/register', component: register } // name 或 path
]
})
导航:
<router-link to="/login?id=10&name=zs">登录</router-link>
<router-link :to={path:'register',query:{id:5,name:'lili'}}>注册</router-link>
等同于:
router.push(‘/login?id=10&name=zs’)
router.push({path:'register',query:{id:5,name:'lili'}})
**注意:**在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。
this.$router.push(‘/login?id=10&name=zs’)
this.$router.push({path:'register',query:{id:5,name:'lili'}})
注意:jquery可以通过name或path来引入路由
2.params传参
2.params传参
路由:
var router = new VueRouter({
routes: [
{ path: '/login/:id/:name', component: login },// 这里不传入对应的参数(:/id) 刷新页面 参数会消失
{ name:'register', path: '/register', component: register }
]
})
导航:
<router-link to="/login/12/ls">登录</router-link>
<router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>
注意:params只能通过name来引入路由,path会undefined
jquery传参和params传参的区别
1.用法上:
1.上文已经提到query可以用name或path来引入
2.params必需要用name来引入,接收参数都是类似的,分别是this.
route.params.name。
2.地址栏表现形式上:
query:
params:(注意:这里的12和ls 对应的是/:id/:name 这两个参数可以不写 那么就不会在地址栏上显示 不过刷新页面参数会消失 写上参数刷新页面 参数不会消失)