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

以下是一个使用 Vue Router 进行路由定制和调用的完整示例，假设使用 Vue 3 和 Vue Router 4。

1. 创建项目并安装依赖

首先，确保你已经安装了 Vue CLI。如果没有安装，可以通过以下命令安装：

npm install -g @vue/cli

然后创建一个新的 Vue 项目：

vue create router - example
cd router - example

接着安装 Vue Router：

npm install vue - router@4

2. 定制路由（router/index.js）

在项目的 router 目录下创建 index.js 文件，用于定义路由配置：

javascript

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;

在上述代码中：

• 使用 createWebHistory() 选择了 HTML5 历史模式。
• 定义了三个主要路由：Home、About 和 User。
• User 路由包含一个嵌套路由 UserDetail，通过 :id 动态参数来匹配不同用户的详情页。

3. 创建视图组件

在 views 目录下创建对应的视图组件：

Home.vue

vue

<template>
    <div>
        <h1>首页</h1>
    </div>
</template>

<script setup>

</script>

<style scoped>

</style>

About.vue

vue

<template>
    <div>
        <h1>关于</h1>
    </div>
</template>

<script setup>

</script>

<style scoped>

</style>

User.vue

vue

<template>
    <div>
        <h1>用户列表</h1>
        <router - view></router - view>
    </div>
</template>

<script setup>

</script>

<style scoped>

</style>

UserDetail.vue

vue

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

<script setup>

</script>

<style scoped>

</style>

4. 在主应用中调用路由（main.js）

在 main.js 中引入并使用路由：

javascript

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

5. 在应用中使用路由（App.vue）

在 App.vue 中使用路由链接和路由视图：

vue

<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>

在上述 App.vue 中：

• 使用 <router - link> 组件创建导航链接，点击链接会触发路由切换。
• <router - view> 组件用于渲染当前匹配路由对应的组件。

这样，一个完整的 Vue 路由定制和调用的示例就完成了。用户可以通过点击导航链接在不同视图之间切换，并且在 User 路由下，通过访问 user/:id 形式的 URL 来查看不同用户的详情。