Vue3路由管理

 一、路由地址获取全攻略

 1.1 核心方法：useRoute钩子

typescriptimport { useRoute } from 'vue-router'// 在setup语法糖中使用const route = useRoute()

1.2 路由对象关键属性详解

属性	示例值	使用场景
fullPath	/project/123?status=edit	带参数的完整路径
path	/project/123	路径匹配
params	{ id: '123' }	获取动态路由参数
query	{ status: 'edit' }	获取URL查询参数
name	ProjectDetail	通过命名路由跳转时使用
meta	{ requiresAuth: true }	权限验证等附加信息

1.3 实战代码示例

// 获取项目ID（假设路由配置为/project/:id）
const projectId = computed(() => Number(route.params.id))
// 监听路由变化
watch(() => route.params.id,(newId) => {fetchProjectDetail(Number(newId))})
// 根据查询参数过滤列表
const filterStatus = ref(route.query.status || 'all')