Vue动态路由

下面，我们来系统的梳理关于 Vue Router 动态路由 的基本知识点：

---

一、动态路由核心概念

1.1 什么是动态路由？

动态路由是指在路由路径中使用动态参数（也称为路径参数）的路由配置。这些参数会根据实际URL的变化而变化，使得同一个路由组件可以处理不同参数下的多种情况。

1.2 动态路由的应用场景

• 用户个人资料页：/user/:id
• 商品详情页：/product/:productId
• 博客文章页：/post/:slug
• 多层分类页面：/category/:categoryId/subcategory/:subcategoryId

1.3 动态路由的优势

1. 组件复用：单一组件处理多个相似资源
2. URL语义化：创建可读性强的URL结构
3. SEO友好：为每个资源生成唯一URL
4. 状态管理简化：参数直接来自URL

二、基础配置与使用

2.1 定义动态参数

使用冒号:标记动态参数：

const routes = [// 基本动态路由{path: '/user/:id',component: UserProfile,name: 'user'},// 多个动态参数{path: '/product/:category/:id',component: ProductDetail,name: 'product'},// 可选参数{path: '/post/:slug?', // 问号表示可选component: BlogPost,name: 'post'}
]

2.2 访问路由参数

在组件中通过$route.params访问参数：

<template><div><h2>用户ID: {{ $route.params.id }}</h2><p>当前分类: {{ $route.params.category }}</p></div>
</template><script>
export default {created() {console.log('当前用户ID:', this.$route.params.id)}
}
</script>

2.3 参数正则约束

使用正则表达式限制参数格式：

{path: '/user/:id(\\d+)', // 只匹配数字IDcomponent: UserProfile
},
{path: '/date/:year(\\d{4})-:month(\\d{2})', // 匹配YYYY-MM格式component: DateView
},
{path: '/:path(.*)*', // 通配符路由（404页面）component: NotFound
}

三、响应参数变化

3.1 参数变化检测问题

问题描述：当从/user/123导航到/user/456时，由于使用的是同一个组件实例，组件的生命周期钩子不会重新执行。

3.2 解决方案

方案1：使用watch监听

export default {watch: {'$route.params.id'(newId, oldId) {// 对路由变化做出响应this.fetchUser(newId)}},methods: {fetchUser(id) {// 获取用户数据}}
}

方案2：使用导航守卫

export default {beforeRouteUpdate(to, from, next) {// 当路由变化但组件被复用时调用this.fetchUser(to.params.id)next()}
}

方案3：使用key属性强制刷新