Vue-router之路由参数传递

params

// client/config/routes.js
export default [
  {
    path: '/app/:id',
  }
]
复制代码
// client/app.vue
<template>
  <div id="app">
    <router-link to="/app/123">app</router-link>
  </div>
</template>
复制代码

点击 app 链接,跳转 todo 页面 ,本地url 路径 localhost:8000/app/123

通过 $route 可以拿到路由信息

// client/app.vue
export default {
  mounted () {
    console.log(this.$route)
  }
}
复制代码
// 控制台
{name: "app", meta: {…}, path: "/app/123", hash: "", query: {…}, …}
fullPath:"/app/123"
hash:""
matched:[{…}]
meta:{title: "this is app", description: "xxx"}
name:"app"
params:{id: "123"}
path:"/app/123"
query:{}
__proto__:Object
复制代码

props 传 params

通过这种方式,不需要 this.$route 的写法,它会和 vue-router 有一定的耦合,如果其升级,用法可能会变;如果组件使用了 this.$router 的写法,就不能作为单纯的组件拿到其他地方用,只能作为 route 配置中的 component 去用。

通过 props 的方式,实现了解耦,可以在其他地方使用组件,只需要传 props 即可。

// client/config/routes.js
export default [
  {
    path: '/app/:id', // 把 :id 作为 props 传到 Todo 中
    props: true, // 通过 props 来传 params
    component: Todo,
  }
]
复制代码
export default {
  props: ['id'],
  mounted () {
    console.log(this.id) // 控制台 123
  }
}
复制代码
props 指定值
// client/config/routes.js
export default [
  {
    path: '/app/:id', 
    props: {
      id: '456' 
    },
    component: Todo,
  }
]
复制代码
props 函数

通过 query 指定 id

// client/config/routes.js
export default [
  {
    path: '/app/:id', 
    props: (route) => ({ id: route.query.b }) // 通过 query 指定 id
    component: Todo,
  }
]
复制代码

query

在路径上直接添加,http://localhost:8000/app/123?a=123&b=456

通过 $route 拿到 query

query: {a: "123", b: "456"}
复制代码

转载于:https://juejin.im/post/5b95cef2f265da0acd209d3a

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值