美文网首页
nuxt动态路由传参

nuxt动态路由传参

作者: 断水无忧 | 来源:发表于2020-04-21 12:47 被阅读0次
    我的动态路由目录
    你也可以这样

    在this.$router.push中有两种传参方式

    1.使用query来存放参数

    // 其中的game.id,这就是动态路由的参数,也就是‘_gt’
    // query: {name: 'aaaa'},就是要传递的参数
    this.$router.push({path: '/goodsList/'+game.id, query: {name: 'aaaa'}})
    

    效果:
    这样做你传递的参数就会在地址栏显示出来,但是你如果喜欢使用path只能使用query来传参


    如何在跳转的页面取值

    2.使用params来存放参数

    this.$router.push({name: 'goodsList-gt', params: {gt: game, name:'aaaa'}})
    

    效果:
    使用这种方式,地址栏中不会把参数显示出来\color{red}{(请注意:使用了params,就不能使用path,只能使用name)}

    请注意下图中的红框


    第一个红框:'goodsList-gt’是根据你的动态路由的路径的来(层级原本使用 /,要变成 -)
    我的路径是 goodsList/_gt 所以转化为=> goodsList-gt
    同理若是你的路径 game/goodsList/_gt 转化为=> game-goodsList-gt
    第二个红框:‘gt’ 是根据你动态路由的名字来定
    我的是_gt这里就只要写gt 就好了

    如何在跳转的页面取值


    相关文章

      网友评论

          本文标题:nuxt动态路由传参

          本文链接:https://www.haomeiwen.com/subject/rdxuihtx.html