在实际开发中跳转页面时，我们经常要把上一页的数据传递到下一个页面，比如我们有一个用户列表，在列表页点击了一个用户，进到用户详情页，那么用户详情页就需要知道用户在列表页点击的是哪个用户，然后再展示相应的详情。这时候就需要我们用路由把用户的id传到详情页，在vue-router有两种方式可以传递参数

1）动态路由

动态路由的形式是这样的

/userDetail/:id

我们发现路由里有一个冒号，这就表示它是一个动态路由，我们还是来写一个例子，

1）在views下创建一个新的页面，userDetail.vue

<template>
  <div>用户详情页获取到了id：{{ id }}</div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
    }
  },
  mounted() {},
}
</script>

<style></style>

我们把页面上基本内容写上，现在id是空，因为我们还没有获取

2）在router.js中导入新的页面，并且为它对应上路由

import { createRouter, createWebHistory } from 'vue-router' 
import index from './views/index' 
import list from './views/list' 
import userDetail from './views/userDetail'  // 新增的页面

const routes = [
  {
    path: '/', 
    component: index,
  },
  {
    path: '/list',
    component: list,
  },
  {
    path: '/userDetail/:id', // 新增的路由，前一部分/userDetial是固定路由，后面:id说明是动态路由
    component: userDetail,
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes, 
})

export default router

在列表页我们写点模拟数据，渲染出来一个用户列表，在列表中我们增加router-link，实现跳转页面的效果

<template>
  <div>这里是列表页</div>
  <router-link to="/">点击跳转到首页</router-link>
  <ul>
    <li v-for="item in userList" :key="item.id">
      <router-link :to="'/userDetail/' + item.id"
        >点击查看{{ item.name }}</router-link
      >
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        {
          name: '亚历山大',
          id: '01',
        },
        {
          name: '凯撒',
          id: '02',
        },
        {
          name: '屋大维',
          id: '03',
        },
      ],
    }
  },
}
</script>

<style></style>

我们可以发现这次我们的router-link里面to属性是有冒号的，说明它现在动态绑定的，前一部分是固定的字符串'/userDetail/'，后面加上了当前一项的id，渲染结果是这样的

点击链接我们就可以进入到用户详情页了

这时候我们需要在用户详情页获取传过来的参数了

this.$route.params.id

这样就可以获取到了
需要注意两点
1）这次用的是this.$route，表示当前的路由，跟之前用的this.$router不一样，后者表示我们在router中创建的那个全局管理路由的对象
2）this.$route.params是一个对象，通过动态路由传过来的参数都会放在这个对象里，我们取的是id这个参数，这里的id和路由配置时候'/userDetail/:id'这个id是相对应的
我们在详情页也定义了一个id数据，以便我们使用，放在模板里

<template>
  <div>用户详情页获取到了id：{{ id }}</div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
    }
  },
  mounted() {
    this.id = this.$route.params.id
  },
}
</script>

<style></style>

我们可以看到详情页就可以显示id了

这是通过动态路由传参，初学者可能理解起来比较费劲，要自己动手写一写，下面说一种简单的

2.使用queryString传参

例如

http://www.test.com/?a=1&b=2

在url中问号后面的a=1&b=2，就是queryString，这里表示参数a的值是1，参数b的值是2

放在我们的例子中，我们现在把用户的名字也传到用户详情页，使用queryString的方式来传
像这样

http://localhost:8080/userDetail/03?name=屋大维

改动一下我们渲染列表的代码，

    <li v-for="item in userList" :key="item.id">
      <router-link :to="'/userDetail/' + item.id + '?name=' + item.name"  // 拼接链接的时候增加了name
        >点击查看{{ item.name }}</router-link
      >
    </li>

渲染结果是：

下一步就是获取这个参数了，这么传参有个好处，就是不用更改router.js里面的配置
那么该在用户详情页直接获取了

this.$route.query.name

这次试用query对象，和上次params不一样，
我们的参数名字是name

完整代码是

<template>
  <div>用户详情页获取到了id：{{ id }},他的名字是：{{ name }}</div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      name: '',
    }
  },
  mounted() {
    this.id = this.$route.params.id
    this.name = this.$route.query.name
  },
}
</script>

<style></style>

这节课我们向页面传递参数的两种方式都学到了，在实际开发中都很常用，大家一定要掌握。