当前位置：首页 > news >正文

Vue Router页面跳转指南：告别a标签，拥抱组件化无刷新跳转

news 2025/10/29 8:48:28

前言：为什么要用Vue Router？

传统网页开发使用<a href>实现页面跳转，但会导致整个页面刷新，用户体验差且性能开销大。Vue Router提供的<RouterLink>组件可实现组件级别的无刷新跳转，完美契合单页应用的需求。

基础使用：两步实现优雅跳转

配置路由规则
文件位置：src/router/index.js

import About from '../views/About.vue'export default [{ path: '/company',     // 访问路径name: 'company',      // 路由名称（可选但推荐）component: About      // 映射的组件}
]

使用RouterLink跳转
在Vue组件的template中：

<RouterLink to="/company">企业介绍</RouterLink>

效果对比：传统 vs Vue Router

特性	传统 `<a href>`	Vue Router `<RouterLink>`
页面刷新	整页刷新	仅组件切换，无刷新
性能	需重新加载所有资源	只加载必要组件
用户体验	有白屏闪烁	平滑过渡
URL变化	通过`href`跳转	通过前端路由控制

核心优势解析

无刷新加载组件
点击<RouterLink>时：

Vue Router拦截点击事件
根据路由配置找到对应组件
动态替换<router-view>区域内容
URL同步更新（无HTTP请求）

自动激活状态
当前路由匹配时会自动添加class：

<RouterLink to="/company" class="router-link-active router-link-exact-active"
>企业介绍</RouterLink>

支持多种路由形式

<!-- 基础路径 -->
<RouterLink to="/company">企业介绍</RouterLink><!-- 命名路由 -->
<RouterLink :to="{ name: 'company' }">企业介绍</RouterLink><!-- 带参数 -->
<RouterLink to="/company/123">企业详情</RouterLink>

进阶技巧

自定义激活类名

// router/index.js
const router = createRouter({linkActiveClass: 'active-link',      // 部分匹配linkExactActiveClass: 'exact-active' // 精确匹配
})

编程式导航
在方法中跳转：

methods: {goToCompany() {this.$router.push('/company')// 或使用命名路由this.$router.push({ name: 'company' })}
}

路由懒加载（优化性能）

{path: '/company',component: () => import('../views/About.vue') // 按需加载
}

实战示例

完整路由配置
文件：src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/company',name: 'company',component: () => import('../views/About.vue'),meta: { title: '企业介绍' } // 附加元信息}
]const router = createRouter({history: createWebHistory(),routes
})export default router

导航菜单实现
文件：src/App.vue

<template><nav><RouterLink to="/company"active-class="active">企业介绍</RouterLink></nav><router-view></router-view>
</template><style>
.active {color: #42b983;font-weight: bold;
}
</style>