学习- vue4.x-router 带参数动态路由知识点理解demo

who am I？ 6666

于 2022-08-05 14:31:00 发布

阅读量132

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/machine_vision123/article/details/129253541

本文详细介绍了如何在Vue应用中使用动态路由进行页面跳转，并展示了如何通过`/:id`参数传递数据。通过创建`test-router`组件实例，读者可以学习到如何获取和使用动态路由参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

app.use(store).use(router).mount('#app')

通过调用 app.use(router)，可以在任意组件中以 this.$router 的形式访问，并且以 this.$route 的形式访问当前路由

1、带参数的动态路由匹配

　　使用场景：页面跳转，想要携带id到目标页面中使用推荐使用

代码演示：router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
import testRouter from '../views/test-router.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 带参数的动态路由匹配
  {
    path: '/test/:id',
    name: 'Test',
    component: testRouter
  }
]

// routes传递给createRouter
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

test-router组件：

<template>
  <div>test-router</div>
</template>

<script>
export default {
  name: ' testRouter'

}
</script>

<style>

</style>

获取参数：this.$route.params.id