Vue Router 结合组合式API：构建流畅单页应用的利器

哈喽大家好，今天来聊聊 Vue Router，它是 Vue.js 官方的路由引擎，能让你的单页应用（SPA）拥有丝滑般的导航体验。

为什么用单页应用？

在开始之前，先简单说说为啥现在都流行用单页应用 (SPA)。

传统的多页应用 (MPA)  每次跳转页面都要重新加载整个网页，速度慢，体验差，就像看幻灯片一样，一卡一卡的。

image.png

而单页应用 (SPA)  只在第一次加载时加载所有资源，之后就只更新需要变化的部分，速度快，体验好，就像原生 App 一样流畅。

image.png

Vue Router 登场！

Vue Router 就是 Vue.js 的路由管家，它负责管理页面之间的跳转，让你的 SPA 应用拥有流畅的导航体验。

Vue Router 的工作原理很简单，它把不同的组件映射到不同的路由地址，用户访问某个地址时，Vue Router 就会自动切换到对应的组件，而不用重新加载整个页面。

如何设置 Vue Router？

说了这么多，赶紧上手试试吧！

首先，用 npm 安装 Vue Router：

npm install vue-router@4

当然，你也可以在用 create-vue 创建新项目时直接选择安装 Vue Router。

接下来，配置一下路由：

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [] // 这里放路由定义
});

export default router;

这里，createRouter 函数创建了一个新的路由实例，createWebHistory 使用 HTML5 历史 API 来管理导航，routes 数组用来存放路由定义。

最后，在 main.js 文件中配置 Vue 实例：

// src/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');

创建和注册路由

现在，我们来创建两个页面：首页和项目页，并为它们注册路由。

定义组件

在 /views 目录下创建两个组件文件：

1. HomeView.vue

<template>
  <div>
    <h1>Home</h1>
    <RouterLink to="/projects">Projects</RouterLink>
  </div>
</template>

1. ProjectsView.vue

<template>
  <div>
    <h1>Projects</h1>
    <RouterLink to="/">Home</RouterLink>
  </div>
</template>

这两个组件分别显示“Home”和“Projects”，并使用 RouterLink 组件添加了彼此的链接，方便用户在页面之间跳转。

注册路由

在 router/index.js 文件中，定义路由并将其映射到对应的组件：

import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import ProjectsView from '@/views/ProjectsView.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/', name: 'home', component: HomeView },
    { path: '/projects', name: 'projects', component: ProjectsView }
  ]
});

export default router;

这样，Vue 就知道每个路径应该显示哪个组件了。

在 App.vue 中使用 RouterView

在 App.vue 文件中，使用 RouterView 组件来显示当前路由对应的组件：

<template>
  <main>
    <RouterView />
  </main>
</template>

RouterView 就像一个占位符，Vue Router 会根据当前路由地址，自动将对应的组件渲染到这个位置。

测试一下吧

现在，我们来运行应用，看看效果如何。

运行应用

在终端中输入以下命令：

npm run dev

预期效果

在浏览器中打开 http://localhost:5173，你应该能看到“Home”页面，并且有一个指向“Projects”页面的链接。点击链接，页面会跳转到“Projects”页面，并且也有一个返回首页的链接。

注意观察以下几点：

• 页面过渡是否流畅：  页面之间应该能够流畅地切换，没有明显的卡顿或闪烁。

• 网络请求：  打开浏览器的开发者工具，查看网络请求，你会发现页面跳转并没有触发新的文档请求，因为只有需要变化的内容才会重新加载。

如果一切正常，恭喜你，Vue Router 设置成功！

懒加载：提升性能的秘密武器

Vue Router 的延迟加载功能 可以提升应用性能。简单来说，就是把你的应用拆成一个个小块，用到的时候再加载，这样初始页面加载速度会更快，用户体验也更好。

例如，我们可以修改 router/index.js 文件中的 /projects 路由，使用延迟加载：

{ 
    path: '/projects', 
    name: 'projects', 
    component: import('@/views/ProjectsView.vue') 
}

这样，只有当用户访问 /projects 页面时，才会加载 ProjectView 组件，有效减少初始加载的代码量。

组合式 API：更灵活、更强大

Vue 3 中的 组合式 API 提供了一种更加灵活和强大的方式来管理组件逻辑，它与 Vue Router 配合使用，可以更有效地处理路由相关的逻辑。

下面是一个简单的例子：

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const message = ref('Welcome to the Home Page');

function navigateToProjects() {
  router.push('/projects');
}
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="navigateToProjects">Go to Projects</button>
  </div>
</template>

在这个例子中，我们使用 useRouter 获取路由实例，使用 ref 创建反应式状态，并使用 router.push 方法进行导航。

总结

使用 Vue Router，你的应用可以拥有流畅、高效的页面导航体验，不仅提升用户体验，还能简化开发流程。结合组合式 API，你可以构建更加强大、灵活的单页应用，为用户和开发者带来更好的体验。

最后，别忘了还有更多精彩内容等你探索！

---

往期推荐

38个Vue、Nuxt 和 Vite 技巧、窍门和实践的合集

10 个 必备的JavaScript 实用技巧和最佳实践！

Vue 开发者必备技能：深入理解 Composition API ！

2024 年 10 个很实用的 CSS 新特性，你不一定知道！

10个 React 开发避坑指南

12 种 Vue 设计模式

CSS 秘密武器：25 个小技巧，助你写出更优雅的代码！

JavaScript 的新技能：5 大技巧，打造更强大的 Web 应用

Vue 3 将推出新特性，可以抛弃虚拟DOM了！

我是前端宝哥，每日分享前端开发技术，关注下面二维码，围观我的朋友圈。

关注下方公众号加星标，送我的电子书资料

• 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF

• 回复「Vue脑图」获取 Vue 相关脑图

• 回复「思维图」获取 JavaScript 相关思维图

• 回复「简历」获取简历制作建议

• 回复「简历模板」获取精选的简历模板

• 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。

• 回复「知识点」下载高清JavaScript知识点图谱

• 回复「读书」下载成长的相关电子书