Vue.js 路由 4.x 完全指南：构建单页面应用程序（SPA）

2023-09-24 18:37:03

前言：单页面应用程序（SPA）的魅力

在现代网络应用开发中，单页面应用程序（SPA）已成为一种流行且实用的技术方案。SPA 应用程序与传统的页面刷新式应用程序不同，它在加载初始页面后，无需刷新即可在同一页面上动态更新内容。这种方式带来了更流畅的用户体验、更快的页面加载速度，以及更强大的应用程序交互性。

而 Vue.js 路由则是构建 SPA 应用的关键工具之一。它提供了一套丰富的 API 和功能，让您能够轻松定义路由、管理视图和处理导航。

认识 Vue.js 路由 4.x

Vue.js 路由 4.x 是 Vue.js 3.x 的官方路由库。它与 Vue.js 3.x 完全兼容，并且引入了许多新的特性和改进，例如：

改进的代码结构和 API 设计
对 TypeScript 的更好的支持
改进的导航体验
对单文件组件（SFC）的更好支持
更强的可扩展性和灵活性

使用 Vue.js 路由 4.x 构建 SPA

要使用 Vue.js 路由 4.x 构建 SPA，您需要遵循以下步骤：

安装 Vue.js 路由

使用 npm 或 yarn 安装 Vue.js 路由：

npm install vue-router

或者

yarn add vue-router

配置 Vue.js 路由

在您的 Vue.js 应用程序中，创建一个名为 router.js 的文件，并添加以下代码：

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

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

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

export default router

使用 Vue.js 路由

在您的 Vue.js 应用程序中，可以使用 router-view 组件来显示路由视图，并使用 router-link 组件来创建导航链接：

<template>
  <div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">About</router-link>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>