千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

在 Vue.js 中，可以使用 Vue Router 来实现动态路由匹配。Vue Router 提供了一种灵活的方式来根据不同的参数动态生成和匹配路由。：

1.创建一个router文件夹 在他下面在创建的index.js文件。

2.定义动态路由：

在路由配置文件中，使用冒号 ：id 或许 ：usename 来表示动态参数，这些参数将作为路由路径的一部分。

const router = new VueRouter({
  routes: [
    {
      path: '/usename/:id',
      component: Usename,
    },
  ]
});

3.定义动态参数的组件：

为动态参数的组件书写对应的 Vue 组件。在组件内部，可以通过 $router.params 可以访问传递的动态参数。

<template>
  <div>
    User {{ $route.params.id }}
  </div>
</template>

<script>
export default {
  name: 'Username',
}
</script>

4使用动态路由：

在需要进行动态路由匹配的地方，使用 <router-link>或 router.push() 来生成带有动态参数的链接。可以在router.push()中输入你要跳转页面的路径，写法1.this.$router.push( `/usename/${id}`)；写法2:this.$router.push（{

name:"Usename",

params:{

myid:id

})

动态路由配置中的 /usename：id可以匹配任意的 /usename 后面跟着的参数值，这些参数值可以通过 $route.params 在组件中访问到。