给路由传递参数有两种方式，一种是动态路由，类似localhost:8080/home/article/1，这种方式适合于传递单个参数。
另外一种是请求查询字符串的方式，类似localhost:8080/home/page?user="abc"&psw="123"
1.首先看第一种动态路由的方式
场景：在（21）的Home组件中我们模拟从服务器拿到文章的列表信息（包括文章的id和title），根据拿到的文章列表信息，每篇文章做一个子路由，点击这个子路由传递文章的id到子路由，在子路由组件中获取传入的id根据id去服务器拿到文章的内容显示到页面上。
在路由设置js文件中添加Home带参数的子路由组件：
router/index.js：
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '',
name: '主页',
component: ()=>import('../views/Home.vue'),
children:[{
path:'article/:id',//带参数的路由方式
component:()=>import('../views/Article.vue'),
}]
},
{
path: '/home',
name: 'Home',
component: ()=>import('../views/Home.vue'),
children:[{
path:'article/:id',//带参数的路由方式
component:()=>import('../views/Article.vue'),
}]
},
{
path: '/about',
name: 'About',
component: ()=>import('../views/About.vue'),
children:[{
path:'user',
component:()=>import('../views/AboutUser.vue'),
},{
path:'role',
component:()=>import('../views/AboutRole.vue'),
}]
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Home组件中为每一篇文章添加一个子路由：
Home.vue:
<template>
<div >
这是Home页面
<br>
<li v-for="item in articleList" :key="item.id">//循环文章列表添加子路由
<router-link :to="'/home/article/'+item.id">{{item.title}}</router-link>//设置子路由的带参数的请求路由和标签显示内容
</li>
<br>
<router-view></router-view>
</div>
</template>
<script>
export default {
data:function(){
return {
articleList:[//模拟返回文章列表
{
id:1,
title:'文章1'
},
{
id:2,
title:'文章2'
},
{
id:3,
title:'文章3'
}
],
}
},
components: {
}
}
</script>
新建Article子组件，views/Article.vue:
<template>
<div >
这是文章{{$route.params.id}}:内容为{{getContent}}//获取传入的路由参数
</div>
</template>
<script>
export default {
data:function(){
return{
}
},
computed:{
getContent(){//方法中获取传入的路由参数，模拟后台请求文章内容
return this.$route.params.id;
}
}
}
</script>
（2）同样实现上面的功能变为请求字符串的方式传递路由参数
index.js中为Home组件配置子路由Article组件：
children:[{
path:'article',//这里就不需要上面的:id这种方式，直接像正常的配置子路由的方式
component:()=>import('../views/Article.vue'),
}]
Home组件的router-link标签中拼接的路由地址改变：
<li v-for="item in articleList" :key="item.id">
<router-link :to="'/home/article/?id='+item.id+'&title='+item.title">{{item.title}}</router-link>
</li>
Article.vue中获取路由带的参数的方式改变：
<template>
<div >
这是文章{{$route.query.id}}:内容为{{getContent}}
</div>
</template>
<script>
export default {
data:function(){
return{
}
},
computed:{
getContent(){
return this.$route.query.title;
}
}
}
</script>
其他的都一样就可以了。