美文网首页
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动态路由传参

    在this.$router.push中有两种传参方式 1.使用query来存放参数 效果:这样做你传递的参数就会在...

  • nuxt路由及传参

    最近的nuxt项目中经常会用到路由传参,故在此有所总结了下nuxt中传参的方式和vue项目中传参的方式 nuxt ...

  • Vue 动态路由

    动态路由 动态路由传参

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • vue路由的介绍(二)--vue动态路由和get的传值

    vue动态路由和get的传值---->同属于路由的传参 1,vue动态路由: 动态路由的配置: ①,在配置路由时加...

  • vue-router配置笔记

    路由的配置 二、动态路由传参1.配置动态路由 2.在对应的页面 三、get传值

  • react的动态路由

    1. 动态路由传参 建议用这个,刷新不会丢 2 query传参 3. state传参

  • vue全家桶(2.5)

    3.8.动态路由匹配和路由组件传参 #3.8.1.动态路由匹配 动态路由意味着不固定,具有某种模式,我们希望通过某...

  • 动态路由

    路由动态传参 方法一 步骤1:在进行传参 分析:格式是定义一个对象,传路由的名称name...

网友评论

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

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