快捷導(dǎo)航

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

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

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

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

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

npm install -g @vue/cli

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

vue create router - example
cd router - example

接著安裝 Vue Router：

npm install vue - router@4

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

在項(xiàng)目的 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 歷史模式。
定義了三個(gè)主要路由：Home、About 和 User。
User 路由包含一個(gè)嵌套路由 UserDetail，通過 :id 動(dòng)態(tài)參數(shù)來匹配不同用戶的詳情頁。

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

在 views 目錄下創(chuàng)建對(duì)應(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 中：

使用 <router - link> 組件創(chuàng)建導(dǎo)航鏈接，點(diǎn)擊鏈接會(huì)觸發(fā)路由切換。
<router - view> 組件用于渲染當(dāng)前匹配路由對(duì)應(yīng)的組件。

這樣，一個(gè)完整的 Vue 路由定制和調(diào)用的示例就完成了。用戶可以通過點(diǎn)擊導(dǎo)航鏈接在不同視圖之間切換，并且在 User 路由下，通過訪問 user/:id 形式的 URL 來查看不同用戶的詳情。

到此這篇關(guān)于使用 Vue Router 進(jìn)行路由定制和調(diào)用的示例的文章就介紹到這了,更多相關(guān)vue router路由定制與調(diào)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: