大家好,我是小杨,一个和Vue-router"斗智斗勇"6年的前端老司机。今天要分享的是如何让路由地址"活"起来,实现各种花式动态路由生成技巧!
一、动态路由的基本玩法
1. 最简单的动态参数
javascript
// 路由配置
{
path: '/user/:userId',
component: User
}
// 生成链接
this.$router.push('/user/' + 我.id)
// 或者
this.$router.push({
name: 'user',
params: { userId: 我.id }
})
我的踩坑提醒:使用params时一定要用命名路由!
2. 多参数动态路由
javascript
// 配置
{
path: '/article/:category/:id',
component: Article
}
// 生成方式
this.$router.push({
path: `/article/${category}/${articleId}`
})
二、高级动态路由技巧
1. 正则表达式约束
javascript
{
path: '/user/:userId(\d+)', // 只匹配数字ID
component: User
}
2. 可选动态参数
javascript
{
path: '/search/:keyword?', // 问号表示可选
component: Search
}
// 两种都能匹配
this.$router.push('/search/vue')
this.$router.push('/search')
3. 通配符路由
javascript
{
path: '/docs/*', // 匹配/docs下的所有路径
component: Docs
}
三、动态路由的实战应用
1. 动态生成侧边栏菜单
javascript
// 菜单配置
const menuItems = [
{ path: '/dashboard', name: '控制台' },
{ path: '/user/:id', name: '用户中心' }
]
// 动态渲染
<router-link
v-for="item in menuItems"
:to="item.path.replace(':id', currentUserId)"
>
{{ item.name }}
</router-link>
2. 面包屑导航生成
javascript
computed: {
breadcrumbs() {
const matched = this.$route.matched
return matched.map(route => {
return {
path: this.resolvePath(route),
title: route.meta.title
}
})
}
},
methods: {
resolvePath(route) {
return route.path
.replace(':userId', this.$store.state.userId)
.replace(':projectId', this.currentProject)
}
}
四、动态路由的调试技巧
1. 查看当前路由信息
javascript
// 在组件中
console.log(this.$route)
/*
{
path: "/user/123",
params: { userId: "123" },
query: {},
hash: "",
fullPath: "/user/123",
matched: [...]
}
*/
2. 路由匹配测试工具
javascript
// 测试路径是否匹配
const match = router.resolve('/user/123')
console.log(match)
五、小杨的动态路由最佳实践
- 命名路由:尽量使用name而不是path跳转
- 参数校验:用正则约束动态参数格式
- 默认值:为可选参数设置合理的默认值
- 文档注释:为动态路由添加详细注释
javascript
/**
* @name 用户详情页
* @path /user/:userId
* @param {number} userId - 用户ID必须为数字
*/
{
path: '/user/:userId(\d+)',
name: 'user',
component: User
}
六、动态路由的常见坑点
1. 刷新后params丢失
解决方案:
javascript
// 使用query替代
this.$router.push({
path: '/user',
query: { userId: 我.id } // 变成/user?userId=123
})
2. 动态路由组件不更新
解决方案:
javascript
// 监听路由变化
watch: {
'$route.params.userId'(newId) {
this.loadUser(newId)
}
}
⭐ 写在最后
请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
✅ 对于文章中部分内容不理解
✅ 解答我文章中一些疑问
✅ 认为某些交互,功能需要优化,发现BUG
✅ 想要添加新功能,对于整体的设计,外观有更好的建议
✅ 一起探讨技术加qq交流群:906392632
最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!