vue 写一个动态路由的完整示例

下面是一个简单的 Vue 动态路由的完整示例：

• 在 router.js 文件中，定义路由表和一个动态路由参数：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import User from './components/User.vue'

Vue.use(Router)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/user/:id', component: User }
]

const router = new Router({
  mode: 'history',
  routes
})

export default router

• 这里的动态路由参数使用了冒号 : 指定，它可以匹配到被 : 替换的任何值。比如 /user/123，路由将匹配到 User 组件并传入 id: 123 的路由参数。

• 在 User.vue 组件中，可以通过 $route.params.id 来获取路由参数的值：

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

<script>
export default {
  name: 'User'
}
</script>

这就是一个简单的 Vue 动态路由示例，它可以匹配到 /user/123、/user/456 等不同的路由，并通过路由参数传递给 User 组件。