在实际开发中跳转页面时，我们经常要把上一页的数据传递到下一个页面，比如我们有一个用户列表，在列表页点击了一个用户，进到用户详情页，那么用户详情页就需要知道用户在列表页点击的是哪个用户，然后再展示相应的详情。这时候就需要我们用路由把用户的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>
这节课我们向页面传递参数的两种方式都学到了，在实际开发中都很常用，大家一定要掌握。
