快捷導(dǎo)航

使用 Vue Router 進(jìn)行路由定制和調(diào)用的完整示例

更新時間：2025年12月11日 09:46:20 作者：天問一

文章詳細(xì)介紹了如何使用Vue Router進(jìn)行路由定制和調(diào)用,涵蓋了從創(chuàng)建項目和安裝依賴到定制路由、創(chuàng)建視圖組件、在主應(yīng)用中調(diào)用路由以及在應(yīng)用中使用路由的完整過程,感興趣的朋友跟隨小編一起看看吧

1. 創(chuàng)建項目并安裝依賴

首先，確保你已經(jīng)安裝了 Vue CLI。如果沒有安裝，可以通過以下命令安裝：

npm install -g @vue/cli

然后創(chuàng)建一個新的 Vue 項目：

vue create router - example
cd router - example

接著安裝 Vue Router：

npm install vue - router@4

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

在項目的 router 目錄下創(chuàng)建 index.js 文件，用于定義路由配置：

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 動態(tài)參數(shù)來匹配不同用戶的詳情頁。

3. 創(chuàng)建視圖組件

在 views 目錄下創(chuàng)建對應(yīng)的視圖組件：

Home.vue

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

About.vue

<template>
    <div>
        <h1>關(guān)于</h1>
    </div>
</template>
<script setup>
</script>
<style scoped>
</style>

User.vue

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

UserDetail.vue

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

4. 在主應(yīng)用中調(diào)用路由（main.js）

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

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

5. 在應(yīng)用中使用路由（App.vue）

在 App.vue 中使用路由鏈接和路由視圖：

<template>
    <div id="app">
        <nav>
            <ul>
                <li><router - link to="/">首頁</router - link></li>
                <li><router - link to="/about">關(guān)于</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 中：