美文网首页
vue-router2路由传参的几种方式

vue-router2路由传参的几种方式

作者: vueLover | 来源:发表于2017-11-05 21:25 被阅读0次

简单介绍一下vue-router传参的几种,深入学习请移步 vue-router2中文文档

声明式

<router-link :to="{path:'newsDetail/'+id}"><router-link>

<router-link :to="{name:'newsDetail',params:{id:123}}"><router-link>

//也可以使用以下方式:
<router-link v-bind="{to:'/newsDetail/'+id}"><router-link>

编程式

router.push({ name: 'newsDetail', params: { id: 123 }})  ->/newsDetail/123

router.push({ path: 'newsDetail', query: { id: 123 }}) ->newsDetail?id=123
// 注意这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

//别忘了路由里配置
{ path: '/newsDetail/:id', name:'newsDetail',component: newsDetail}
  • 以params的方式在路由之间传递参数,参数可以从this.$route.params中获取,以query的方式在路由之间传递参数,参数可以从this.$route.query中获取。

相关文章

  • Vue-Router

    1. 路由配置 默认路由跳转 在 new Router时可用的配置参数: 2.路由传参 Vue路由传参的几种方式 ...

  • 微信小程序路由传参

    路由传参常用方式有以下几种 通过url传参// 产品列表页面 详情 // 或者wx.navigateTo({ ...

  • 几种vue的组件传值方式

    几种vue的组件传值方式 1、路由传参 ①定义路由时加上参数props: true,在定义路由路径时要留有参数占位...

  • react路由跳转传参方式

    react在路由跳转进行传参有以下几种方式:1. params方式传参app.js 子组件OnRefs.js 组件...

  • vue-router2路由传参的几种方式

    简单介绍一下vue-router传参的几种,深入学习请移步 vue-router2中文文档 声明式 编程式 以pa...

  • 路由传参的几种方式

    路由跳转的两种方式 1. 声明式导航 2. 编程式导航 3. 参数的接收 注意:以查询字符串 query进行传递的...

  • vue路由传参.md

    两种传参方法 1.命名路由传参(name, params方式) 2.路由路径传参(path, query方式...

  • 微信小程序路由传参

    路由传参常用方式有以下几种 1. 通过url传参 上面的方式的参数不能是对象,如果需要传对象,可以将对象转成jso...

  • 路由传参

    引言 我们的地址一般都是带参数的,比如: 这就涉及到路由传参问题一般来说,路由传参有以下几种方式: 通过设置pat...

  • 2018-09-25 vue初学十(路由的嵌套及传参)

    1.路由的嵌套 案例 2.路由的传参 传参的两种方式 案例

网友评论

      本文标题:vue-router2路由传参的几种方式

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