Vue入门十三、路由的传参和取参
1、查询参login?id=12345
配置:(传参):to="{name:'login', query:{id:'loginid'}}"
获取:(取参)this.$route.query.id
我们提供的服务有:成都网站设计、成都网站制作、外贸网站建设、微信公众号开发、网站优化、网站认证、爱民ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的爱民网站制作公司
2、路由参数
配置:(传参):to="{name:'login', params:{id:'loginid'}}"
获取:(取参)this.$route.params.id
3、路径参数register/registerid/info
配置:(传参):to="{name:'register', params:{id:'registerid'}}"
配置路由规则:
routes: [{path: '/register/:id/info', name: 'register', component: Register}]
获取:(取参)this.$route.params.id
4、使用props直接取参
配置:(传参):to="{name:'propsParams', params:{id:'propsParamsId'}}"
配置路由规则:
routes: [
// 通过props传值
{path: '/propsParams', name: 'propsParams', props: true, component: PropsParams}]
获取:(取参)
var PropsParams = {
template: `
传参直接取值
直接拿到ID:{{id}}
`,
// 直接通过props取参
props: ['id']
}
5、通过JS进行传参
this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}})
代码示例:
query传参:
Title
params传参
Title
params路径传参
Title
params使用props直接取参
Title
js传参
Title
fullPath路由全路径监听
Title
完整代码示例:
Title
本文题目:Vue入门十三、路由的传参和取参
网页路径:http://scyanting.com/article/pgcejg.html