使用 Vue Router 进行路由定制和调用的完整示例

npm install -g @vue/cli

vue create router - example
cd router - example

npm install vue - router@4

import { createRouter, createWebHistory } from 'vue - router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import User from '../views/User.vue';
import UserDetail from '../views/UserDetail.vue';
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: About
    },
    {
        path: '/user',
        name: 'User',
        component: User,
        children: [
            {
                path: ':id',
                name: 'UserDetail',
                component: UserDetail
            }
        ]
    }
];
const router = createRouter({
    history: createWebHistory(),
    routes
});
export default router;

<template>
    <div>
        <h1>首页</h1>
    </div>
</template>
<script setup>
</script>
<style scoped>
</style>

<template>
    <div>
        <h1>关于</h1>
    </div>
</template>
<script setup>
</script>
<style scoped>
</style>

<template>
    <div>
        <h1>用户列表</h1>
        <router - view></router - view>
    </div>
</template>
<script setup>
</script>
<style scoped>
</style>

<template>
    <div>
        <h1>用户详情 - {{ $route.params.id }}</h1>
    </div>
</template>
<script setup>
</script>
<style scoped>
</style>

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');

<template>
    <div id="app">
        <nav>
            <ul>
                <li><router - link to="/">首页</router - link></li>
                <li><router - link to="/about">关于</router - link></li>
                <li><router - link to="/user">用户</router - link></li>
            </ul>
        </nav>
        <router - view></router - view>
    </div>
</template>
<script setup>
</script>
<style>
 #app {
    font - family: Avenir, Helvetica, Arial, sans - serif;
    -webkit - font - smoothing: antialiased;
    -moz - osx - font - smoothing: grayscale;
    text - align: center;
    color: #2c3e50;
    margin - top: 60px;
}
</style>