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

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