1. 代码思想：
1.1 如果一个页面（加载页面）在多个页面都会用到，封装到公共的 store 文件夹里面的 main.js 如果需要修改的话，只让不同页面控制 main.js 里的变量即可
1.2 页面中的网络请求很多，（加载页面）在获取数据的时候，都会用到，所以要写在request 请求文件里面
import axios from 'axios'
import { BASE_URL, TIMEOUT } from './config'
import useMainStore from '@/stores/modules/main'
const mainStore = useMainStore()
request(config) {
// mainStore.isLoading = true;
return new Promise((resolve, reject) => {
this.instance.request(config).then((res) => {
resolve(res.data);
// mainStore.isLoading = false;
}).catch(err => {
reject(err);
// mainStore.isLoading = false;
})
})
}
- 发送网络请求的代码文件夹
2. 动态路由
path 后面的参数可以是 Query 参数，也可以是动态路由的参数，这个例子是动态路由的例子
3. $attr分析
- 组件可以接收props，但对非props的属性
- 在Vue中，当父组件向子组件传递属性和事件时，如果子组件没有在props中声明这些属性，或者没有在emits中声明事件，这些属性和事件会被保存在
$attrs对象里。特别是对于原生事件，比如click，如果子组件的根元素需要继承这些事件，就需要用v-bind="$attrs"来绑定。
4. 路由里面携带参数
1. 定义方式
- 路径占位符：通过冒号
:标记动态参数（如:id）。
路由配置：
// router.js
const routes = [
{
path: "/detail/:id",
component: Detail
}
]
2. 匹配规则
- URL 示例：
/detail/123→id的值为"123"。 - 访问方式：通过
$route.params.id获取参数值。
3. 关键特性
- 必传性：若路径定义为
/:id，则访问时必须携带该参数（否则路由不匹配）。 - 类型限制：参数默认是字符串类型（可通过路由守卫或组件内逻辑转换类型）。
二、params ****vs ****query
1. params ****参数
- 用途：标识资源的唯一性（如文章详情页的 ID）。
- 位置：属于 URL 路径的一部分（如
/detail/123）。 - 访问方式：
$route.params。
2. query ****参数
- 用途：传递附加过滤或配置信息（如分页、排序）。
- 位置：URL 的查询字符串（如
/list?page=2&sort=asc）。 - 访问方式：
$route.query。
3. 对比总结
| 特性 | params | query |
|---|---|---|
| 定义位置 | 路径中（/path/:id） | URL 查询字符串（?key=value） |
| 必传性 | 根据路由配置是否必需 | 可选 |
| 典型场景 | 资源唯一标识（如文章 ID） | 过滤条件（如分页、排序） |
| SEO 影响 | 对 SEO 更友好（路径包含关键信息） | 无直接影响 |
三、代码示例
1. 路由配置（params）
// router.js
{
path: "/detail/:id",
name: "Detail",
component: () => import("@/views/Detail.vue")
}
2. 导航传参（编程式导航）
// 跳转到 /detail/123
router.push({
name: "Detail", // 使用路由名称
params: { id: 123 } // 传递 params
})
// 或通过路径直接传递（需确保路径匹配）
router.push("/detail/123")
3. 组件内获取参数
<!-- Detail.vue -->
<script setup>
import { useRoute } from "vue-router"
const route = useRoute()
console.log(route.params.id) // 输出 "123"（字符串类型）
</script>
四、常见问题
1. params ****参数是可选的吗？
- 默认必传：若路径定义为
:id，必须传递参数。 - 可选参数：可通过正则表达式或重复参数实现：
// 可选 id（匹配 /detail 或 /detail/123）
path: "/detail/:id?"
2. 如何传递对象或复杂类型？
params****仅支持字符串：需手动序列化（如JSON.stringify）和反序列化。- 替代方案：将复杂数据存储在 Vuex/Pinia 中，通过
params或query传递标识符。
3. params ****参数丢失问题
- 场景：直接刷新页面时
params可能丢失。 - 解决：确保路由配置正确，或使用
localStorage临时存储关键参数。
五、最佳实践
- 优先使用 ****
params****标识资源唯一性（如详情页）。 - 用 ****
query****传递非关键性参数（如搜索条件、分页）。 - 显式定义路由的 ****
name****属性：避免硬编码路径，提升代码可维护性。 - 类型校验：在组件内对
params做类型转换（如Number(id)）。
总结
path: "/detail/:id"→params参数（路径参数）。- 核心区别：
params是路径的一部分，query是查询字符串。 - 适用场景：
params用于资源定位，query用于附加过滤。
