什么是动态路由
在前端开发中，通常我们需要实现页面之间的跳转和参数传递。而动态路由是一种动态生成路由的方式，可以根据不同的参数来加载不同的组件和页面内容。
Vue Router动态路由的使用
在Vue Router中，我们可以使用/符号来定义动态路由，并通过$route.params来获取动态路由的参数。下面是一个使用动态路由的例子：
import { createWebHistory, createRouter } from 'vue-router';
const routes = [
{
path: '/user/:id',
name: 'User',
component: UserComponent,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
在上面的例子中，我们定义了一个路由路径为/user/:id的动态路由。其中:id是一个占位符，表示我们可以通过改变这个参数来获取不同的用户信息。
当我们在页面中跳转到/user/1时，Vue Router会自动加载相应的UserComponent组件，并将参数1作为$route.params.id传递给组件。
动态路由参数的获取
在定义和使用动态路由时，我们经常需要获取动态路由传递的参数。在Vue Router中，我们可以通过$route.params来获取动态路由参数。
例如，我们可以在一个组件中使用以下代码来获取动态路由参数并显示在页面上：
<template>
<div>
<h1>{{ $route.params.id }}</h1>
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$route.params.id);
}
}
</script>
在上面的例子中，$route.params.id表示获取动态路由传递的参数id。我们可以直接在模板中使用$route.params.id来显示参数值，也可以在组件的生命周期钩子中使用this.$route.params.id来访问参数值。
动态路由的注意事项
在使用动态路由时，有一些注意事项需要我们注意：
-
动态路由的参数只能由路由路径的占位符来提供，不能通过query参数或者hash来传递。例如，
path: '/user/:id'是一个合法的动态路由，但path: '/user?id=:id'不是一个合法的动态路由。 -
动态路由参数只有在组件加载时才能获取到。如果需要在组件的生命周期钩子中获取动态路由参数，可以使用
this.$route.params来访问。 -
动态路由的参数是响应式的，当参数发生变化时，组件会重新渲染。
总结
动态路由是Vue Router中非常重要的一个特性，可以根据不同的参数来加载不同的组件和页面内容。在使用动态路由时，需要注意一些规则和注意事项。
在Vue3中，使用动态路由非常简单，只需要在路由路径中使用:来指定占位符，然后通过$route.params来获取参数即可。
希望本文对你理解Vue3路由中的动态路由有所帮助！
本文来自极简博客，作者：天空之翼，转载请注明原文链接：Vue3-40-路由-动态路由
