重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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://cqcxhl.cn/article/pgcejg.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP