【愚公系列】《循序渐进Vue.js 3.x前端开发实践》056-Vue Router的带参数的动态路由
标题 | 详情 |
---|---|
作者简介 | 愚公搬代码 |
头衔 | 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。 |
近期荣誉 | 2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳博主等。 |
博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在现代前端开发中,构建高效、灵活的单页面应用(SPA)是许多开发者的目标。而路由管理作为 SPA 的核心功能之一,直接关系到用户体验和应用的可维护性。Vue Router 作为 Vue.js 的官方路由解决方案,提供了强大的路由功能,尤其是动态路由的支持,使得我们能够根据不同的需求灵活处理页面的展示。
本文将重点介绍 Vue Router 中的动态路由及其参数传递的使用方法。我们将从动态路由的基本概念开始,逐步深入,探讨如何在路由中设置参数、如何在组件中接收这些参数,以及如何利用这些参数实现丰富的页面交互效果。通过实例演示,帮助大家更好地理解动态路由的实际应用场景。
🚀一、Vue Router的带参数的动态路由
🔎1.路由参数匹配
在Vue Router中,我们可以通过带有动态参数的路由来根据不同的参数渲染相同的组件。例如,如果我们需要展示一个用户中心页面,可以通过路由参数来根据不同的用户信息渲染不同的内容。
示例:用户中心
假设我们需要创建一个用户中心,通过路由的动态参数来显示不同的用户信息(如用户名和用户ID)。我们首先定义一个简单的 UserDemo
组件:
UserDemo.vue
<template>
<h1>姓名: {{ $route.params.username }}</h1>
<h2>id: {{ $route.params.id }}</h2>
</template>
在上面的代码中,我们使用 $route.params
来获取当前路由的动态参数 username
和 id
。
接下来,我们在 main.js
中配置路由,并使用动态路由参数:
main.js
import { createApp } from 'vue';
import App from './App.vue';
import UserDemo from './components/UserDemo.vue';
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/user/:username/:id', // 动态路由
component: UserDemo,
//props: true, // 将 route.params 作为 props 传递给组件
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
createApp(App).use(router).mount('#app');
🦋1.1 路由参数匹配
- 动态参数:在路由路径中,使用
:param
的方式定义动态参数。例如/user/:username/:id
。 - 访问路由参数:在组件内通过
this.$route.params
或useRoute()
来访问路由参数。
在浏览器中访问 http://localhost:5173/#/user/小王/8888
,就会显示 小王
和 8888
,这两个参数分别代表用户名和用户ID。
🦋1.2 路由组件复用
当路由参数发生变化时,Vue 会复用当前的组件,而不是销毁并重新创建组件。这会导致生命周期钩子不会被再次触发,因此,如果需要通过路由参数请求数据,可以使用导航守卫来处理。
使用 onBeforeRouteUpdate
监听路由变化
为了确保在路由参数变化时重新请求数据,我们可以在组件中使用 onBeforeRouteUpdate
来监听路由变化:
UserDemo.vue
<script setup>
import { onBeforeRouteUpdate, useRoute } from 'vue-router';
const route = useRoute();
onBeforeRouteUpdate((to, from) => {
alert(`组件加载,请求数据。路由参数为:name: ${to.params.username}, id: ${to.params.id}`);
console.log(to, from);
});
</script>
<template>
<h1>姓名: {{ $route.params.username }}</h1>
<h2>id: {{ $route.params.id }}</h2>
</template>
每当路由参数发生变化时,onBeforeRouteUpdate
会被触发,从而调用数据请求逻辑。
🔎2.路由参数的正则匹配
Vue Router 允许我们在定义路由时,使用正则表达式来对参数进行匹配。这样,我们就可以根据参数类型来决定匹配哪一个路由组件。
示例:根据参数类型匹配路由
假设我们需要区分用户中心页面和用户设置页面。我们可以使用正则表达式来匹配参数类型,例如,如果参数 id
是数字,就匹配到用户设置页面:
const routes = [
{ path: '/user/:username', component: UserDemo },
{ path: '/user/:id(\\d+)', component: UserSetting }
];
在上面的代码中,/user/:id(\\d+)
路径将只匹配数字类型的 id
,而 /user/:username
路径将匹配字符串类型的 username
。
🦋2.1 使用正则表达式创建多级参数
你还可以使用正则表达式来创建多级路径的动态路由,例如:
{ path: '/category/:cat*', component: CategoryDemo }
这种路由配置会将 /category/一级/二级/三级
路径匹配到 CategoryDemo
组件,并将参数 cat
转换为一个数组 ['一级', '二级', '三级']
。
🦋2.2 可选参数
如果路由的某个参数是可选的,你可以在路由路径中使用 ?
来标记该参数为可选。例如,以下路径中的 username
参数是可选的:
{ path: '/user/:username?', component: User }
🔎3.路由嵌套
当页面中有多个子路由时,Vue Router 提供了嵌套路由的支持。假设用户中心页面中还包含了一个好友列表,我们可以将好友列表部分作为子路由来定义。
示例:嵌套路由
首先,我们定义一个 FriendsDemo
组件来展示好友列表:
FriendsDemo.vue
<template>
<h1>好友列表</h1>
<h2>好友人数: {{ $route.params.count }}</h2>
</template>
然后,在 UserDemo.vue
组件中定义嵌套路由:
UserDemo.vue
<template>
<h1>用户中心</h1>
<router-view></router-view> <!-- 渲染子路由 -->
</template>
<script setup>
import { defineComponent } from 'vue';
</script>
最后,修改路由配置,将好友列表设置为子路由:
main.js
import FriendsDemo from './components/FriendsDemo.vue';
const routes = [
{
path: '/user/:username',
component: UserDemo,
children: [
{
path: 'friends/:count',
component: FriendsDemo
}
]
}
];
在上面的例子中,FriendsDemo
组件是 UserDemo
的子路由。通过 <router-view></router-view>
,我们可以在用户中心页面中嵌套展示好友列表。
🔎4.总结
- 动态路由参数:通过
:param
在路由路径中定义动态参数,可以在组件中通过$route.params
获取这些参数。 - 导航守卫:使用
onBeforeRouteUpdate
来监听路由变化,从而实现每次路由参数变化时重新加载数据。 - 正则匹配:使用正则表达式对路由参数进行匹配,确保不同类型的参数路由能够匹配到正确的组件。
- 嵌套路由:通过嵌套路由技术,将子组件嵌入父组件中,实现更加灵活和复杂的页面结构。
这些技术在开发大型应用时非常有用,能够帮助我们更好地管理和展示不同的页面和数据。
- 点赞
- 收藏
- 关注作者
评论(0)