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

前言：为什么要用Vue Router？

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

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

配置路由规则

文件位置：src/router/index.js

javascript 复制代码

import About from '../views/About.vue'

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

使用RouterLink跳转

在Vue组件的template中：

html 复制代码

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

效果对比：传统 vs Vue Router

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

核心优势解析

无刷新加载组件

点击<RouterLink>时：

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

自动激活状态

当前路由匹配时会自动添加class：

html 复制代码

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

支持多种路由形式

html 复制代码

<!-- 基础路径 -->
<RouterLink to="/company">企业介绍</RouterLink>

<!-- 命名路由 -->
<RouterLink :to="{ name: 'company' }">企业介绍</RouterLink>

<!-- 带参数 -->
<RouterLink to="/company/123">企业详情</RouterLink>

进阶技巧

自定义激活类名

javascript 复制代码

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

编程式导航

在方法中跳转：

javascript 复制代码

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

路由懒加载（优化性能）

javascript 复制代码

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

实战示例

完整路由配置

文件：src/router/index.js

javascript 复制代码

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

html 复制代码

<template>
  <nav>
    <RouterLink 
      to="/company"
      active-class="active"
    >
      企业介绍
    </RouterLink>
  </nav>
  <router-view></router-view>
</template>

<style>
.active {
  color: #42b983;
  font-weight: bold;
}
</style>

总结要点

配置路由：在router/index.js中建立路径与组件的映射
使用<RouterLink>：替代传统的<a>标签实现无刷新跳转
显示区域：在布局中添加<router-view>作为内容容器
优势：更高效、更灵活🎉