Vue的路由

在前端开发中，路由 是一个非常重要的概念，它定义了路径与组件之间的对应关系。简单来说，路由的作用是根据不同的 URL 路径展示不同的内容或组件，而不需要重新加载整个页面。

前端路由的核心是路径的变化。以下是路由工作的基本流程：

1. 路径变化：用户点击导航链接或通过编程方式修改路径。

2. 路由器监听：路由器监听路径的变化，并捕获新的路径。

3. 规则匹配：路由器根据定义的路由规则（路径与组件的映射关系）匹配当前路径。

4. 加载组件：根据匹配结果，加载对应的组件或执行对应的逻辑。

5. 动态切换：将新组件渲染到页面的指定区域，替换旧组件。

举个例子

假设我们有一个简单的 SPA 应用，包含两个页面：/home 和 /about。

• 路径变化：用户点击导航栏中的“关于”链接，路径从 /home 变为 /about。

• 路由器监听：路由器捕获路径变化，发现路径变为 /about。

• 规则匹配：路由器根据定义的规则，匹配到 /about 对应的组件是 AboutComponent。

• 加载组件：路由器加载 AboutComponent，并将其渲染到页面的指定区域。

• 动态切换：页面内容从首页切换为关于页面，整个过程无需重新加载页面。

那么怎么使用路由呢？

一、问题引入

假设你正在开发一个简单的 Vue 3 项目，需要实现以下功能：

1. 导航栏：包含多个导航链接，如“首页”、“新闻”和“关于”。

2. 动态内容展示：点击不同的导航链接时，页面内容需要动态切换，而无需重新加载整个页面。

3. 路径变化：URL 路径需要根据导航链接的变化而改变，例如点击“新闻”时，路径变为 /news。

那么，如何实现这些功能呢？答案是使用 Vue Router。

二、实现 Vue 3 路由的基本步骤

1. 安装 Vue Router

首先，确保你的项目中已经安装了 Vue Router。如果尚未安装，可以通过以下命令安装：

bash复制

npm i vue-router

2. 创建路由规则

在项目中创建一个 router 文件夹，并在其中创建一个 index.ts 文件。这个文件将用于配置路由规则。

router/index.ts：

TypeScript复制

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

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

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

export default router;

这里要解释一下，createRouter表示创建路由，接下来引入一个个可能要呈现的组件，第三步createRouter函数就是创建路由器，路由器中history是设置的路由器的工作模式，而routes是我们配置的路由规则了，最后我们要暴露出去router

在 Vue 3 中，路由器（Vue Router）提供了两种主要的工作模式：History 模式(createWebHistory) 和 哈希模式(createWebHashHistory)

History 模式

使用 HTML5 的 History API（如 pushState 和 replaceState）来管理路由。URL 中不包含 # 符号，更加美观，更接近传统网站的 URL。易被搜索引擎索引，利于 SEO 优化。路径变化时不会触发页面刷新，用户体验更流畅。但是需要服务器需要正确配置以支持 HTML5 History API，否则刷新页面可能会导致 404 错误。

哈希模式

使用 URL 的哈希部分（#）来管理路由。浏览器的地址栏中的 # 后面的变化不会触发页面的重新加载。

不需要服务器配置，可以在不支持 HTML5 History API 的旧浏览器上使用。基于 URL 的哈希部分，浏览器原生支持，开发简单。路径中包含 #，不符合现代网站的风格。搜索引擎对带有 # 的 URL 处理有一定的局限性。因为哈希部分不会发送到服务器，刷新页面可能导致状态丢失。一般偏重后端项目的使用哈希模式，稳定。

3. 引入并使用路由器

在项目的入口文件（如 main.ts）中引入并使用路由器。

main.ts：

TypeScript复制

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

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

import router from './router';就是引入路由了，然后app.use(router);就是使用路由，这样就结束了吗？还没有，我们还要创建各个组件的vue页面。

4. 创建路由组件

在 components 文件夹中创建对应的组件文件，如 Home.vue、News.vue 和 About.vue。

Home.vue：

vue复制

<template>
  <div>
    <h1>首页</h1>
    <p>欢迎来到首页！</p>
  </div>
</template>

News.vue：

vue复制

<template>
  <div>
    <h1>新闻</h1>
    <p>这里是新闻页面。</p>
  </div>
</template>

About.vue：

vue复制

<template>
  <div>
    <h1>关于</h1>
    <p>这里是关于页面。</p>
  </div>
</template>

5. 在页面中使用 router-link 和 router-view

好，页面创建完了，能不能切换页面了呢，还不能，为什么呢？有没有发现我们创建的vue页面放在哪里还没有定义呢，这就需要router-view了。router-view的功能就是用来展示路由组件的。

那么我们知道页面中我们点击一个链接后实现跳转路由，vue3中的链接也是吗？答案是否定的，这里要换一种写法了，使用

在 App.vue 中使用 router-link 和 router-view 来实现导航和组件的动态加载。

App.vue：

<template>
  <div class="app">
    <h2>Vue 路由测试</h2>
    <div class="navigate">
      <router-link to="/home" class="nav-item">首页</router-link>
      <router-link to="/news" class="nav-item">新闻</router-link>
      <router-link to="/about" class="nav-item">关于</router-link>
    </div>
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<style>
.app {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.navigate {
  display: flex;
  gap: 10px;
}
.nav-item {
  text-decoration: none;
  color: blue;
}
.nav-item.router-link-active {
  color: red;
}
.main-content {
  margin-top: 20px;
}
</style>

上面的to的写法呢，我们称之为字符串写法，其实这里的router-link的to还有一种写法：

<router-link :to="{ path: '/about' }">关于</router-link>

这种写法呢称之为对象写法，兄弟们可以感觉这种写法麻烦，但却是开发中最常用的，因为它可以带参数，功能更强大，除了用path，还可以用name来实现跳转，但要在routes规则中定义好

三、路由的核心概念

1. 路径（Path）：URL 中的路径部分，如 /home、/news。

2. 组件（Component）：与路径对应的 Vue 组件。

3. 路由器（Router）：管理路径与组件的对应关系，并监听路径变化。

4. router-link：用于创建导航链接，类似于 HTML 中的 <a> 标签。

5. router-view：用于动态加载匹配路径的组件。

四、路由的工作流程

1. 路径变化：用户点击导航链接或通过编程方式修改路径。

2. 路由器监听：路由器捕获路径变化，并根据定义的规则匹配对应的组件。

3. 加载组件：将匹配的组件渲染到 router-view 中。

4. 动态切换：根据路径变化动态切换组件，无需重新加载页面。

这里还要注意一个点就是，组件分为路由组件和一般组件，一般组件是由开发者手动创建并直接在模板中使用的组件。路由组件是通过 Vue Router 的规则动态加载的组件。它们通常不会直接写在模板中，而是通过路由配置来加载。Home、News 和 About 是路由组件，因为它们是通过路由规则动态加载的。如果一个组件是通过 <router-view> 动态加载的，那么它就是路由组件。如果一个组件是通过 <template> 直接写在模板中的，那么它就是一般组件。

为了更好地管理项目，建议将路由组件和一般组件分别放在不同的文件夹中：

• components 文件夹：用于存放一般组件。

• pages 或 views 文件夹：用于存放路由组件。

这就是规范。。

在 Vue 3 中，当路由切换时，路由组件会被卸载，就像一个人不用的时候把你毙了，用你的时候再救活你，哈哈哈

五、总结

通过以上步骤，我们可以在 Vue 3 中实现一个基本的路由功能，包括导航链接、动态组件加载和页面切换效果。路由的核心在于路径与组件的对应关系，而路由器则是管理这些关系的关键工具。