异常教程

Vue.js 路由（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，单页应用（SPA）因其流畅的用户体验和高效性而备受青睐。Vue.js 作为前端框架中的佼佼者，其配套的路由解决方案 Vue.js 路由（Vue Router）更是为开发者提供了灵活且强大的导航机制。无论是构建个人博客、电商平台还是企业级管理后台，掌握 Vue.js 路由的核心原理与实践技巧，都是开发者进阶道路上不可或缺的一环。本文将从零开始，通过比喻、案例和代码示例，带你系统理解 Vue.js 路由的运作逻辑与应用场景。

一、Vue.js 路由：什么是导航的“交通指挥官”？

1.1 路由的定义与核心作用

想象一座城市的交通系统：车辆（页面内容）需要根据道路标识（路由规则）到达指定目的地（URL 地址）。Vue.js 路由正是这样一个“交通指挥官”，它负责在单页应用中根据用户访问的 URL，动态加载对应的组件或内容，同时管理页面间的跳转与状态。

其核心功能包括：

  • 路径映射：将 URL 路径（如 /about）与 Vue 组件（如 About.vue）关联。
  • 导航控制：实现页面间跳转、参数传递和导航守卫（如登录验证）。
  • 状态管理：保留或重置页面跳转前的状态（如滚动位置、表单数据）。

1.2 为什么需要 Vue.js 路由？

  • 提升用户体验：避免页面完全刷新，实现“无缝”跳转。
  • 模块化开发：将页面拆分为独立组件，降低代码耦合度。
  • SEO 友好：结合服务端渲染（SSR）或静态生成，提升搜索引擎可见性。

二、快速入门：安装与基础配置

2.1 安装与初始化

首先通过 npm 或 yarn 安装 Vue Router：

npm install vue-router@4  
yarn add vue-router@4

然后在 Vue 项目中初始化路由：

// src/router/index.js  
import { createRouter, createWebHistory } from 'vue-router';  
import Home from '../views/Home.vue';  
import About from '../views/About.vue';  

const routes = [  
  { path: '/', component: Home },  
  { path: '/about', component: About }  
];  

const router = createRouter({  
  history: createWebHistory(),  
  routes  
});  

export default router;

在 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');

2.2 基础路由组件与跳转

在模板中使用 <router-view> 渲染当前路由对应的组件：

<!-- App.vue -->  
<template>  
  <div>  
    <nav>  
      <router-link to="/">Home</router-link>  
      <router-link to="/about">About</router-link>  
    </nav>  
    <router-view />  
  </div>  
</template>

此时，访问 / 或 /about 路径时，页面会动态切换 Home 或 About 组件。

三、进阶技巧：动态路由与嵌套结构

3.1 动态路由参数：让路径“活起来”

假设需要根据用户 ID 加载不同资料页，可通过动态路径参数实现：

const routes = [  
  { path: '/user/:id', component: UserDetail }  
];

在组件中通过 this.$route.params.id 获取参数值。例如：

// UserDetail.vue  
export default {  
  mounted() {  
    console.log('User ID:', this.$route.params.id);  
  }  
};

3.2 嵌套路由：构建父子页面关系

若页面存在层级结构（如管理后台的“仪表盘 → 用户列表”），可使用嵌套路由：

const routes = [  
  {  
    path: '/admin',  
    component: AdminLayout,  
    children: [  
      { path: '', component: Dashboard }, // 默认子路由  
      { path: 'users', component: UserList }  
    ]  
  }  
];

在父组件 AdminLayout.vue 中添加 <router-view> 渲染子路由：

<template>  
  <div>  
    <sidebar />  
    <router-view /> <!-- 渲染子组件 -->  
  </div>  
</template>

四、路由导航守卫：控制页面访问权限

4.1 全局守卫：在跳转前验证用户状态

通过 router.beforeEach 实现登录验证：

router.beforeEach((to, from, next) => {  
  const isAuthenticated = checkAuth(); // 自定义验证函数  
  if (to.path === '/login') {  
    next();  
  } else if (!isAuthenticated) {  
    next('/login');  
  } else {  
    next();  
  }  
});

4.2 组件级守卫：精细化权限控制

在组件内使用 beforeRouteEnter 钩子：

// UserDetail.vue  
export default {  
  beforeRouteEnter(to, from, next) {  
    // 此时组件实例未创建，无法访问 this  
    checkUserPermission(to.params.id).then(() => next()).catch(() => next('/403'));  
  }  
};

五、实战案例：构建一个电商网站

5.1 需求分析与路由设计

假设要开发一个简单的电商平台，包含以下功能：

  • 首页（/）
  • 商品分类页（/products）
  • 商品详情页（/products/:id）
  • 购物车（/cart）
  • 用户登录（/login）

5.2 路由配置与组件开发

// router/index.js  
import { createRouter, createWebHistory } from 'vue-router';  
import Home from '@/views/Home.vue';  
import Products from '@/views/Products.vue';  
import ProductDetail from '@/views/ProductDetail.vue';  
import Cart from '@/views/Cart.vue';  
import Login from '@/views/Login.vue';  

const routes = [  
  { path: '/', component: Home },  
  {  
    path: '/products',  
    component: Products,  
    children: [  
      { path: ':id', component: ProductDetail }  
    ]  
  },  
  { path: '/cart', component: Cart },  
  { path: '/login', component: Login }  
];  

const router = createRouter({  
  history: createWebHistory(),  
  routes  
});  

export default router;

在商品分类页中，通过 router-link 跳转到详情页：

<!-- Products.vue -->  
<template>  
  <div>  
    <h2>商品列表</h2>  
    <ul>  
      <li v-for="product in products" :key="product.id">  
        <router-link :to="`/products/${product.id}`">{{ product.name }}</router-link>  
      </li>  
    </ul>  
  </div>  
</template>

5.3 动态加载商品数据

在 ProductDetail.vue 中，根据动态参数请求商品详情：

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

const route = useRoute();  
const productId = route.params.id;  
const product = ref({});  

onMounted(() => {  
  // 模拟 API 请求  
  fetchProductById(productId).then(data => {  
    product.value = data;  
  });  
});  
</script>

六、性能优化与常见问题

6.1 懒加载路由组件

通过 import() 函数实现按需加载，减少首屏加载时间：

const routes = [  
  {  
    path: '/products',  
    component: () => import('@/views/Products.vue')  
  }  
];

6.2 路由缓存与滚动位置恢复

避免重复渲染相同路由的组件：

// 在路由配置中添加 meta 字段  
{ path: '/about', component: About, meta: { keepAlive: true } },  

// 在 main.js 中启用缓存  
const router = createRouter({  
  // ...其他配置  
  scrollBehavior(to, from, savedPosition) {  
    // 恢复滚动位置  
    return savedPosition || { top: 0 };  
  }  
});

结论

通过本文的学习，你已掌握了 Vue.js 路由 的核心概念、配置方法和进阶技巧。从基础的路径映射到动态参数、嵌套结构，再到导航守卫和性能优化，Vue Router 为开发者提供了全面的解决方案。无论是构建个人项目还是企业级应用，合理利用路由功能都能显著提升开发效率与用户体验。

下一步行动建议：

  1. 尝试用本文案例搭建一个电商网站原型；
  2. 探索 Vue Router 的命名路由、路由元信息等高级特性；
  3. 结合 Vue 3 的组合式 API（如 useRouter、useRoute）优化代码结构。

掌握路由技术后，你的 Vue.js 项目将如同拥有了一套完善的“导航系统”，为后续集成状态管理、API 调用等复杂功能打下坚实基础。现在，是时候打开代码编辑器，亲手实践这些知识了！

最新发布

查看更多文章