一文理解Vue.js 与 Vue Router：构建现代单页面应用

引言

今天来讲讲Vue.js 里面的路由导航。本文将深入讲解 Vue.js 的核心概念，并结合 Vue Router 展示如何创建一个交互式的、多视图的 SPA。

Vue.js 是一个用于构建用户界面的渐进式框架。Vue Router 作为官方推荐的路由管理器，使得基于 Vue 的单页面应用程序（SPA）的开发变得更加简单和直观。

Vue.js 核心概念

响应式系统

Vue.js 的核心特性之一是其响应式的数据绑定。这意味着，当数据发生变化时，相关的视图会自动更新。Vue 实现这一特性的关键是通过观察对象中的属性变化，并在检测到变化时触发相应的更新操作。新的与旧属性进行对比，实现局部数据更新

自有数据 (ref, reactive) : 在 Vue 3 中，ref 和 reactive 函数被用来创建响应式数据。ref 用于包裹基本类型数据，而 reactive 则用于创建响应式的对象。
Props : 组件间通信的一种方式，父组件可以通过 props 向子组件传递数据。
计算属性 (computed): 用于定义依赖于其他数据属性的值，这些值会在相关依赖发生改变时自动更新。

组件化开发

Vue.js 提倡组件化的开发模式，每个组件都是独立的，可以有自己的模板、逻辑和样式。这有助于代码的复用和维护。

生命周期钩子 : 组件在其生命周期的不同阶段可以执行特定的操作，如挂载完成 (mounted) 或者即将销毁 (beforeDestroy)。
指令 : Vue 提供了多种内置指令来简化DOM操作，例如 v-bind 用于动态绑定属性，v-model 用于双向数据绑定，v-for 用于列表渲染，v-if 和 v-show 用于条件渲染。

Vue Router 来了

Vue Router 是 Vue.js 官方的路由管理库，它允许开发者使用声明式的路由配置来实现多视图的应用程序。Vue Router 可以接管浏览器的地址栏，根据不同的 URL 显示不同的组件，从而模拟出多页应用的效果，但实际上整个过程是在同一个页面内完成的，这就是所谓的单页面应用（SPA）。

路由基础

Router Link : router-link 是 Vue Router 提供的一个组件，它用于生成导航链接。它替代了传统的 <a> 标签，确保点击链接不会导致页面刷新，而是通过 Vue Router 来处理视图的变化。
未引入的组件 : 如果在路由配置中没有正确引入组件，那么 router-link 将不会正常工作，对应的元素可能会降级为普通的 HTML 元素，比如 <div>。

路由实现

为了使上述 App 组件中的路由链接能够正常工作，我们需要在项目的路由配置文件中定义相应的路由规则。通常这个文件位于 src/router/index.js 或 src/router/index.ts（如果你使用 TypeScript）。以下是一个简单的路由配置示例：

javascript 复制代码

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import PostIndex from '../views/PostIndex.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
  {
    path: '/posts',
    name: 'Posts',
    component: PostIndex,
  }
];

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

export default router;

在这个配置中，我们导入了三个组件 (Home, About, PostIndex) 并为每个组件指定了一个路径。然后我们使用 createRouter 创建了一个路由器实例，并将其导出以便在主应用中使用。

动态路由匹配与嵌套路由

除了基本的路由配置外，Vue Router 还支持动态路由匹配和嵌套路由，这对于构建复杂的应用来说是非常重要的。动态路由允许我们在路径中使用参数，而嵌套路由则可以帮助我们组织更深层次的视图结构。

javascript 复制代码

{
    path: '/posts/:id',
    name: 'Posts',
    component: PostIndex,
  }

最后，我们需要在主应用入口文件（通常是 src/main.js 或 src/main.ts）中引入并使用这个路由器：

javascript 复制代码

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

createApp(App).use(router).mount('#app');

这段代码首先创建了一个 Vue 应用实例，然后调用 .use(router) 方法将路由器安装到应用中，最后将应用挂载到 DOM 上的 #app 元素上。