Vue3+Vue Router实现动态路由导航的示例代码

vue create dynamic-router-example

cd dynamic-router-example

vue add router

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import DynamicRoute from '../views/DynamicRoute.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/user/:name', // 动态路由
    name: 'User',
    component: DynamicRoute
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

<template>
  <div>
    <h2>用户页面</h2>
    <p>欢迎，{{ username }}！</p>
    <router-link to="/">返回主页</router-link>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
 username = ref(route.params.name) // 获取动态参数
</script>

<style scoped>
h2 {
  color: #42b983;
}
</style>

<template>
  <div>
    <h1>主页</h1>
    <form @submit.prevent="navigate">
      <label for="username">输入用户名:</label>
      <input type="text" v-model="name" id="username" required />
      <button type="submit">跳转</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const name = ref('')
const router = useRouter()

const navigate = () => {
  if(name.value) {
    router.push({ name: 'User', params: { name: name.value }})
  }
}
</script>

<style scoped>
h1 {
  color: #35495e;
}
form {
  margin-top: 20px;
}
</style>

src/
├── main.js
├── router/
│   └── index.js
├── views/
│   ├── DynamicRoute.vue
│   └── Home.vue
└── App.vue

<template>
  <router-view />
</template>

npm run serve