《和小米一起学Vue.js》— Vue动态路由

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 。

const routes = [
  {
    path: '/user/:uid',   //对应的网址路径
    name: 'user',         //对应的路由名称
    component: UserView   //对应的组件名称,在上方静态导入
  }
]

像上面这样，使用一个 “:uid” 来接收变量，使得类似于 “/user/11” 和 “/user/32” 这样的网址都可以跳转到 user 。

当使用路径参数匹配的时候，他的值会被 this.$route.params 的形式暴露出来。

<template>
  <div>
    <h1>这里是user页面</h1>
    <h2>当前的用户ID是:{{$route.params.uid}}</h2>
  </div>
</template>

我们还可以同时上传多个参数来一起匹配。比如我们可以同时匹配 uid 和 sid

const routes = [
  {
    path: '/user/:uid/sid/:sid',   //对应的网址路径
    name: 'user',         //对应的路由名称
    component: UserView   //对应的组件名称,在上方静态导入
  }
]

如果需要动态的将 ID 传给 router ，还需要进行一次数据绑定。

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link :to="'/user/'+uid">User</router-link>
    </nav>
    <router-view/>
  </div>
</template>
<script>
export default {
  data(){
    return {
      uid:3
    }
  }
}
</script>

接收参数的方式除了使用 $route.params 之外，还可以使用 $route.query $route.hash 等等。

代码下载

下载地址：  密码：xvsv