Vue Router 入门指南：构建单页面应用的核心路由方案

什么是Vue Router？

Vue Router是Vue.js官方提供的客户端路由解决方案，专门为构建单页面应用(SPA)而设计。它能够将浏览器URL与用户看到的内容动态关联起来，当用户在应用中导航时，URL会相应更新，但页面无需从服务器重新加载。

核心概念解析

1. 路由组件与视图

Vue Router基于Vue的组件系统工作。开发者通过配置路由来告诉Vue Router每个URL路径应该显示哪个组件。这些路由组件通常被称为"视图"，但它们本质上就是普通的Vue组件。

const routes = [
  { path: '/', component: HomeView },
  { path: '/about', component: AboutView }
]

2. RouterView与RouterLink

Vue Router提供了两个核心组件：

• RouterLink：替代传统的<a>标签，实现无刷新页面跳转
• RouterView：作为路由组件的渲染出口

<template>
  <RouterLink to="/">首页</RouterLink>
  <RouterLink to="/about">关于</RouterLink>
  <RouterView />
</template>

3. 路由实例创建

创建路由实例是使用Vue Router的第一步：

import { createRouter, createWebHistory } from 'vue-router'

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

其中history选项控制路由如何映射到URL，常见的有：

• createWebHistory()：使用HTML5 History模式
• createWebHashHistory()：使用hash模式

实际应用示例

1. 注册路由插件

创建路由实例后，需要将其注册为Vue插件：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(router)
app.mount('#app')

2. 访问路由和当前路由

在组件中访问路由有多种方式：

选项式API：

export default {
  methods: {
    navigate() {
      this.$router.push('/about')
    }
  }
}

组合式API：

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

const router = useRouter()
const route = useRoute()

function navigate() {
  router.push('/about')
}
</script>

3. 编程式导航

Vue Router提供了多种导航方法：

• router.push()：导航到新路由，会添加历史记录
• router.replace()：替换当前路由，不添加历史记录
• router.go()：在历史记录中前进或后退

开发实践建议

1. 组件命名规范：

   • 在模板中可以使用<RouterView>或<router-view>
   • 在DOM模板中必须使用kebab-case写法

2. 路由组件设计：

   • 保持路由组件专注于视图展示
   • 复杂逻辑应拆分为子组件或组合式函数

3. 开发环境选择：

   • 推荐使用Vite等现代构建工具
   • 单文件组件(SFC)是最佳实践

常见问题解答

Q：Vue Router必须配合构建工具使用吗？ A：不是必须的，Vue Router也可以通过CDN直接使用全局构建版本。

Q：路由组件和普通组件有什么区别？ A：本质上没有区别，路由组件只是被配置为特定路径下显示的普通组件。

Q：什么时候该使用RouterLink而不是普通a标签？ A：在SPA内部导航时都应使用RouterLink，只有外部链接才使用普通a标签。

通过本文的介绍，您应该已经掌握了Vue Router的基本使用方法。接下来可以深入学习路由守卫、动态路由、嵌套路由等高级特性，以构建更复杂的单页面应用。