Vue入门十三、路由的传参和取参
admin
2023-02-13 22:00:00
0
1、查询参login?id=12345

配置:(传参):to="{name:'login', query:{id:'loginid'}}"
获取:(取参)this.$route.query.id

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


相关内容

热门资讯

来论|从“菲尔兹奖”,看见科技... 王虹、邓煜分别凭借在调和分析与几何测度论、偏微分方程与数学物理领域的突破性工作,共同荣获2026年菲...
当清洁机器人爬上窗户,能否开启... 过去十年,清洁机器人的故事,几乎都发生在地面上。 扫地、拖地、洗地,从随机碰撞到激光导航,从人工洗抹...
冰箱通电发烫压缩不启动不制冷什... 1、很有可能是因为冰箱的压缩机内高压输出缓冲管出现了断裂,造成高压管不排气,低压管不吸气的这种状况,...
冰箱能通电但是不制冷什么问题 1、电源问题先检查冰箱的电源,看电源的连接是否正常,插头是否通电,插稳。插好插头之后,可以看一下冰箱...
洗衣机通电为什么不转动 导致这类问题一般有这几种情况:可能是进水电磁阀故障导致,若电磁阀已得电还不进水,就是电磁阀的阀芯被卡...
海尔洗衣机不转动了但是会流水 洗衣机可以进水说明电磁阀工作正常;能排水,说明排水泵是正常。洗衣机电源是没有问题的,但是不转动说明洗...
全球首个5G鲁班工坊莫斯科结硕... 【原标题】全球首个5G鲁班工坊莫斯科结硕果 文/本报记者 黄河 刘恺 李鲲 宋瑞 从渤海之滨到莫斯科...
西门子滚筒洗衣机不启动嗒嗒响 1、可能是因为启动电容器的问题导致的不启动;2、可能是因为皮带松弛和打滑的原因;3、可能是因为棘爪和...
重庆一地发生危岩垮塌,巨石掉落... 7月23日,重庆黔江区,有网友称,金溪镇一路段发生塌方,图片显示,一居民房边有巨石落在路上阻断了道路...
山西发布山洪蓝色预警,涉8市4... 2026年7月24日下午,山西省水利厅和山西省气象局联合发布山洪灾害气象风险预警,预计未来12小时,...