Vue Router 入门指南：构建你的第一个单页应用

Vue Router 入门指南：构建你的第一个单页应用

vue-router 🚦 The official router for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-router

前言

在现代前端开发中，单页应用(SPA)已经成为主流架构模式。Vue Router 作为 Vue.js 官方的路由管理器，与 Vue.js 核心深度集成，让构建单页应用变得轻而易举。本文将带你从零开始，快速掌握 Vue Router 的基本用法。

环境准备

在开始之前，确保你已经：

1. 了解 Vue.js 的基础知识
2. 准备好 Vue.js 的开发环境
3. 选择使用 Vue 的完整版本（包含模板编译器）

基础示例解析

HTML 结构

首先，我们来看一个基本的 HTML 结构：

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/foo">前往 Foo</router-link>
    <router-link to="/bar">前往 Bar</router-link>
  </p>
  <router-view></router-view>
</div>

这里有几个关键点：

• <router-link>：Vue Router 提供的导航组件，默认渲染为 <a> 标签
• to 属性：指定目标路由的路径
• <router-view>：路由匹配的组件将在这里渲染

JavaScript 配置

接下来是 JavaScript 部分的配置：

// 1. 定义路由组件
const Foo = { template: '<div>foo 内容</div>' }
const Bar = { template: '<div>bar 内容</div>' }

// 2. 定义路由配置
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建路由实例
const router = new VueRouter({
  routes
})

// 4. 创建并挂载根实例
const app = new Vue({
  router
}).$mount('#app')

让我们逐步解析这个过程：

1. 定义组件：首先定义了两个简单的组件 Foo 和 Bar
2. 配置路由：创建路由配置数组，将路径映射到对应的组件
3. 创建路由实例：使用 VueRouter 构造函数创建路由实例
4. 挂载应用：将路由实例注入到 Vue 根实例中

核心概念深入

路由实例与组件访问

在 Vue 应用中注入路由后，我们可以在任何组件内通过以下方式访问路由信息：

• this.$router：访问路由实例
• this.$route：访问当前路由信息

例如：

export default {
  computed: {
    username() {
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      if (window.history.length > 1) {
        this.$router.go(-1)
      } else {
        this.$router.push('/')
      }
    }
  }
}

路由导航

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

1. 声明式导航：使用 <router-link> 组件
2. 编程式导航：通过 this.$router 的方法
   • push()：导航到新路由
   • go()：在历史记录中前进或后退
   • replace()：替换当前路由

路由匹配与视图渲染

当 URL 变化时，Vue Router 会：

1. 根据配置的路由规则进行匹配
2. 找到对应的组件
3. 在 <router-view> 位置渲染该组件

样式与交互

Vue Router 会自动为匹配的 <router-link> 添加 router-link-active 类，方便我们为当前激活的导航项添加特殊样式。例如：

.router-link-active {
  color: #42b983;
  font-weight: bold;
}

最佳实践建议

1. 模块化组织：在实际项目中，建议将路由配置单独放在一个文件中
2. 懒加载：对于大型应用，使用路由懒加载提升性能
3. 命名路由：为路由命名可以提高代码可维护性
4. 路由守卫：利用导航守卫控制路由权限

总结

通过本文，你已经掌握了 Vue Router 的基本使用方法。从简单的路由配置到组件渲染，Vue Router 提供了一套完整的解决方案来构建单页应用。记住，路由是单页应用的核心，合理的设计路由结构对项目可维护性至关重要。

在接下来的学习中，你可以进一步探索：

• 嵌套路由的实现
• 路由参数传递
• 路由过渡动效
• 滚动行为控制

Vue Router 的强大功能正等待着你去发掘和实践！

vue-router 🚦 The official router for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-router