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"}