Vue Router 完全指南：从入门到实战，高效管理前端路由

whhhhhhhhhw

于 2025-07-13 16:11:44 发布

阅读量528

点赞数 16

CC 4.0 BY-SA版权

文章标签：前端 vue.js javascript vue router

本文链接：https://blog.csdn.net/whhhhhhhhhw/article/details/149309350

前言

在现代化的前端开发中，路由管理是构建单页应用（SPA）的核心功能之一。Vue.js 作为主流的前端框架之一，提供了强大的官方路由库Vue Router，帮助开发者高效管理页面跳转、动态加载、权限控制等关键需求。

无论是构建企业级后台系统，还是开发高性能的 Web 应用，灵活运用 Vue Router 都能显著提升用户体验和开发效率。本文将深入解析 Vue Router 的核心概念、最佳实践以及高级技巧，帮助开发者掌握路由管理的精髓，打造更流畅、可维护的前端应用。

步骤

1.安装

npm i vue-router@4

使用该命名安装Vue Router

2.创建文件配置路由实例

在src文件夹目录下创建router文件夹，在该文件夹中创建index.js，在其配置路由

// 1.导入 createRouter 和 createWebHistory 
import { createRouter, createWebHistory } from 'vue-router'

// 2.定义路由
const routes = [
    {
        path: '/', // 重定向
        redirect: '/home'
    },
    {
        path: '/home',
        component: () => import("../components/home.vue")
    },
    {
        path: '/about',
        component: () => import("../components/about.vue")
    }
]

// 3.创建路由实例
const router = createRouter({
    history: createWebHistory(), // 历史模式
    routes
})

// 4.导出路由实例
export default router

除了历史模式以外还有哈希模式，它们的区别如下：

哈希模式（Hash Mode）：

哈希模式利用URL中的#符号来模拟路由。例如，http://example.com/#/about。浏览器不会将#号后面的内容发送到服务器，因此路由变化不会触发页面刷新。

无需服务器配置即可直接使用，适合静态部署。
兼容性较好，支持老旧浏览器。
URL 中带有 #，美观性稍差。

历史模式（History Mode）:

历史模式利用HTML5的history.pushState API实现无刷新路由切换，例如，http://example.com/about。URL更简洁，但需要服务器支持。

需要服务器配置，确保所有路径返回 index.html，避免 404 错误。
URL更美观，无#符号
兼容性稍差，不支持IE9及以下版本。

选择建议

需要快速部署或静态托管时，选择哈希模式。
追求美观且能配置服务器时，选择历史模式。

3.全局引用

将配置好的路由实例引入到main.js中，代码如下：

import router from './router'

const app = createApp(App)

app.use(router)

4.配置路由视图和导航

在App.vue或根组件中，添加<router-view>作为路由组件的渲染出口，并使用<router-link>实现导航跳转，示例代码如下：

<template>
  <div class="app">
    <!-- 导航链接 -->
    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>
    <!-- 路由组件渲染位置 -->
    <router-view></router-view>
  </div> 
</template>

5.动态路由与参数传递

通过冒号 : 定义动态路由参数，例如用户详情页面：

{
        path:'/user/:id',
        component: () => import("../components/User.vue")
    }

在需要进行跳转时通过router.push进行跳转：

<script setup>
import { ref } from 'vue';
import router from './router';

const id = ref(22)
function handleUserPage() {
  router.push(`/user/${id.value}`)
}
</script>

在组件中通过useRoute获取参数：

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
console.log(route.params.id);
</script>

6.路由守卫配置

比如说我们进入一些页面时需要先登录，为防止在用户没有登录的情况下通过url进入首页，因此就需要去配置全局前置守卫beforeEach

    {
        path: '/user/:id',
        name: 'user',
        component: () => import("../components/User.vue")
    }



// 配置路由守卫
router.beforeEach((to, from, next) => {
    if (to.name === 'user') {  // 通过name匹配
        const id = to.params.id;
        if (id === '123') {
            next();
        } else {
            next('/home');
        }
    } else {
        next();
    }
})

就比如说这个例子，当我们需要进入user组件时，需要去判断它的id是不是为123，如果是则放行，不是则跳转到home组件。

但在实际项目中，这里一般是对登录功能进行操作的，当用户登录时我们会将token保存起来，这里就去判断是否有token，如果有则放行进入首页，没有则无法进入首页。

7.路由元信息

为路由添加自定义数据：

    {
        path: '/home',
        component: () => import("../components/home.vue"),
        meta:{requiresAuth:true, title:'首页'}
    },

通过导航守卫修改页面标题：

router.afterEach((to, from) => {
    document.title = to.meta.title || '默认标题';
})

结语：

感谢阅读，期待这些见解能为你的学习或工作带来启发。若有更多疑问或需求，欢迎进一步交流与讨论。