vue3动态路由

在Vue3中，你可以通过以下方式来实现动态路由：

1. 在路由器定义文件中，使用params属性定义动态路由参数，例如：

   const router = createRouter({
     history: createWebHistory(),
     routes: [
       {
         path: '/user/:userId',
         name: 'User',
         component: User,
         props: true
       }
     ]
   })

   这里的:userId就是动态路由参数。

2. 在组件中，可以通过$route.params访问动态路由参数，例如：

   export default {
     props: ['userId'],
     mounted() {
       console.log(`User ID: ${this.$route.params.userId}`)
     }
   }

   在这个组件中，我们可以通过$route.params.userId访问到路由参数。

3. 动态修改路由参数也很简单，只需要在<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中实现动态路由的基本方法。