---

查询参数传递

1. 什么是查询参数？

查询参数是一种将数据附加到URL的方式，通常出现在问号（?）后面，用于传递信息。例如：/search?keyword=vue&page=1，其中keyword和page就是查询参数。

2. 在Vue中使用查询参数

Vue Router允许你在路由中定义查询参数，这样就可以在不同组件之间传递数据。

步骤 1：在路由配置中定义查询参数

const routes = [{path: '/search',component: SearchComponent,props: (route) => ({ keyword: route.query.keyword, page: route.query.page })}
]

步骤 2：在组件中使用查询参数

<template><div><h1>搜索结果</h1><p>关键词：{{ keyword }}</p><p>页码：{{ page }}</p></div>
</template><script>
export default {props: {keyword: String,page: Number}
}
</script>

步骤 3：在页面中生成链接

<router-link :to="{ path: '/search', query: { keyword: 'vue', page: 1 } }">搜索Vue</router-link>

3. 查询参数传递的优势

• 适合传递多个参数。
• URL可读性好，参数明确。

---

动态路由传递

1. 什么是动态路由？

动态路由是通过路由的路径中的占位符来传递参数的方式。例如：/user/:id，其中:id是动态的，可以根据实际情况传递不同的值。

2. 在Vue中使用动态路由

Vue Router允许定义动态路由。

步骤 1：在路由配置中定义动态路由

const routes = [{path: '/user/:id',component: UserProfileComponent,props: true}
]

步骤 2：在组件中使用动态路由参数

<template><div><h1>用户详情</h1><p>用户ID：{{ id }}</p></div>
</template><script>
export default {props: {id: String}
}
</script>

步骤 3：在页面中生成链接

<router-link :to="'/user/' + userId">查看用户详情</router-link>

3. 动态路由传递的优势

• 优雅简洁，适合传递单个参数。
• 参数直接嵌套在路由路径中，更符合RESTful设计风格。