vue3动态路由

简介: vue3动态路由

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

  1. 在路由器定义文件中,使用params属性定义动态路由参数,例如:
const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user/:userId',
      name: 'User',
      component: User,
      props: true
    }
  ]
})
  1. 这里的:userId就是动态路由参数。
  2. 在组件中,可以通过$route.params访问动态路由参数,例如:
export default {
  props: ['userId'],
  mounted() {
    console.log(`User ID: ${this.$route.params.userId}`)
  }
}
  1. 在这个组件中,我们可以通过$route.params.userId访问到路由参数。
  2. 动态修改路由参数也很简单,只需要在<router-link>this.$router.push()中传入一个包含相应参数的对象即可,例如:
<router-link :to="{ name: 'User', params: { userId: 123 } }">User</router-link>
  1. 或者在JavaScript代码中:
this.$router.push({ name: 'User', params: { userId: 123 } })
  1. 这些就是Vue3中实现动态路由的基本方法。
相关文章
|
1天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
10 0
|
1天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
1天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
7 0
|
1天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
6 0
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
6 1
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
6 0
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
5 0
|
1天前
|
JavaScript 前端开发 API
Vue3 系列:从0开始学习vue3.0
Vue3 系列:从0开始学习vue3.0
8 1
|
1天前
|
网络架构
Vue3 系列:vue-router
Vue3 系列:vue-router
6 2
|
1天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
Vue3+Vite+Pinia+Naive后台管理系统搭建之一:基础项目构建
7 1