在Vue3中,你可以通过以下方式来实现动态路由:
- 在路由器定义文件中,使用
params
属性定义动态路由参数,例如:
const router = createRouter({ history: createWebHistory(), routes: [ { path: '/user/:userId', name: 'User', component: User, props: true } ] })
- 这里的
:userId
就是动态路由参数。 - 在组件中,可以通过
$route.params
访问动态路由参数,例如:
export default { props: ['userId'], mounted() { console.log(`User ID: ${this.$route.params.userId}`) } }
- 在这个组件中,我们可以通过
$route.params.userId
访问到路由参数。 - 动态修改路由参数也很简单,只需要在
<router-link>
或this.$router.push()
中传入一个包含相应参数的对象即可,例如:
<router-link :to="{ name: 'User', params: { userId: 123 } }">User</router-link>
- 或者在JavaScript代码中:
this.$router.push({ name: 'User', params: { userId: 123 } })
- 这些就是Vue3中实现动态路由的基本方法。