首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue router路由定制与调用

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

2025-12-11 09:46:20 作者：天问一

文章详细介绍了如何使用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 文件，用于定义路由配置：

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

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

About.vue

<template>
    <div>
        <h1>关于</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. 在主应用中调用路由（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. 在应用中使用路由（App.vue）

在 App.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 来查看不同用户的详情。

到此这篇关于使用 Vue Router 进行路由定制和调用的示例的文章就介绍到这了,更多相关vue router路由定制与调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！