告别“原地踏步”！Vue Router：带你飞跃单页应用的迷宫 🧭 (附 Vite 快速搭建教程)

引言

各位前端的小伙伴们，大家好呀！🙋‍♂️🙋‍♀️

今天咱们来聊聊 Vue 全家桶里一个超级重要的家伙------Vue Router。啥？你还不知道它？没关系，听我给你娓娓道来。想象一下，你辛辛苦苦搭建了一个酷炫的 Vue 应用，但是每次点击链接都只能"原地踏步"，这感觉是不是像便秘一样难受？ 😖 别慌！Vue Router 就是来解决这个问题的！它就像一个交通指挥官，能让你在不同的页面之间自由穿梭，告别单页应用的"静态"人生，真正体验飞一般的感觉！😎

Vue Router 是个啥？ 🤔

简单来说，Vue Router 就是一个专门用来管理 Vue 应用路由的工具。 它可以让你在单页应用中，通过 URL 的变化来展示不同的页面内容。是不是很神奇？ 🧙‍♂️

小 Tips： 就像我们现实生活中的交通规则一样，路由也有自己的规则，而 Vue Router 就是负责制定和执行这些规则的。

为什么要用它？ 🤷‍♀️

你可能会问："我不用 Vue Router，用 <a> 标签不也能跳转吗？" 嗯，确实可以。但是，<a> 标签会触发页面的刷新，这会导致你的应用出现闪烁，用户体验会大打折扣。而 Vue Router 就像一位魔术师，它能让你的页面在跳转时"悄无声息"，不会刷新页面，让你的用户仿佛在丝滑的绸缎上滑行！ ✨

小 Tips： 在 App.vue 中，我们看到了这样的代码：

 <!-- <a href="/">首页</a>
 <a href="/about">关于</a> -->
 <router-link to="/">首页</router-link>
 <router-link to="/about">关于</router-link>

这里，我们用 router-link 取代了 <a> 标签，就是为了让 Vue Router 来接管路由，实现页面的平滑跳转。就像把手里的汽车方向盘交给了专业司机，稳！

快速入门：用 Vue Router 飞起来！ 🛫 （Vite 助你起飞！）

在开始使用 Vue Router 之前，我们需要先搭建一个 Vue 项目。这里我们选择使用 Vite，一个超快的下一代前端工具，来帮助我们快速构建项目！

我们在这里也就是创建了一个小demo，具体页面如图(不是很好看，主要是为了学习^_^啦)：

中间是三个小组件，但是我这里为了赶时间，没有分开首页,关于,内容。 下面的内容是点击这个类似a标签，然后显示的页面组件部分。

1. 使用 Vite 创建 Vue 项目

首先，确保你的电脑已经安装了 Node.js 和 npm (或 yarn)。 然后打开你的终端，运行以下命令：

npm create vite@latest vue-router-demo --template vue # 使用npm
# 或者
yarn create vite vue-router-demo --template vue # 使用yarn

这里，vue-router-demo 是你的项目名称，你可以根据自己的喜好修改。 --template vue 表示我们创建一个 Vue 项目。

接下来，进入项目目录：

cd vue-router-demo

然后安装依赖：

npm install # 使用npm
# 或者
yarn install # 使用yarn

最后，启动开发服务器：

npm run dev # 使用npm
# 或者
yarn dev # 使用yarn

看到终端输出类似 http://localhost:5173/ 的地址，就表示你的项目已经成功运行了！ 🎉 打开浏览器访问这个地址，你就能看到一个默认的 Vue 应用页面。

小 Tips： Vite 是不是超快？🚀 它就像一个火箭发射器，能让你快速进入开发状态，再也不用等待漫长的项目构建时间了！

2. 安装 Vue Router 插件

现在，我们已经有了一个基础的 Vue 项目，接下来就可以安装 Vue Router 了。在你的项目目录下，运行以下命令：

npm install vue-router@4 # 使用npm
# 或者
yarn add vue-router@4 # 使用yarn

3. 创建路由配置文件 (router/index.js)

在 src 目录下创建一个 router 文件夹，并在其中新建一个 index.js 文件。这个文件就是我们路由的"大脑"🧠。

// router/index.js

import {
  createRouter,  // 创建路由实例
  createWebHashHistory // 创建路由模式
} from 'vue-router'

// 导入页面组件
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import PostIndex from '../views/Post/index/post-index.vue'
import PostShow from '../views/Post/show/post-show.vue'

// 路由配置
const routes = [
  {
    path: '/',   // 路由路径，表示根路径
    component: Home // 路由对应的组件
  },
  {
    path: '/about',
    component: About
  },
   {
    path: '/posts',
    component: PostIndex
  },
  {
    path: '/posts/:postid', // 动态路由，`:postid` 表示一个动态参数
    component: PostShow
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(), // 使用 hash 模式
  routes  // 传入路由配置
})

export default router

小 Tips：

• createRouter: 这个方法用来创建一个路由实例，是我们使用 Vue Router 的起点。
• createWebHashHistory : 这是路由的模式，这里使用的是 hash 模式，URL 会带有 # 符号。 还有一种 createWebHistory模式，URL看起来更像传统路由，但是需要服务器支持。选择哪种模式取决于你的实际需求。
• routes : 这是一个数组，用于配置路由规则，每个对象都定义了一个路由的 path 和对应的 component。

4. 在 main.js 中启用路由

在 main.js 中导入刚刚创建的路由实例，并使用 use 方法将其注册到 Vue 应用中。

// main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'  // 导入路由对象

createApp(App)
  .use(router) // 使用路由插件
  .mount('#app')

小 Tips： Vue 周边的生态真的太赞了！ 只需要一个 use 方法就能轻松把路由 "插" 到我们的 Vue 应用里，简直不要太方便！

5. 使用 router-link 和 router-view

在 App.vue 中，我们使用 router-link 组件来创建导航链接，并使用 router-view 组件来显示当前路由对应的组件内容。

<!-- App.vue -->
<template>
  <div class="page">
    <header class="pag-header">
      <h3 class="brand">{{ name }}</h3>
      <nav class="menu">
       
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于</router-link>
        <router-link to="/posts">内容</router-link>
      </nav>
    </header>
    <main class="page-body">
      <router-view />  <!-- 路由组件显示的地方 -->
    </main>
  </div>
</template>

小 Tips：

• router-link 就像 <a> 标签的升级版，它能告诉 Vue Router 你想要跳转到哪个路由。
• router-view 就像一个占位符，Vue Router 会根据当前的路由，将对应的组件渲染到这个位置。

6. 动态路由： 让你的页面更灵活

如果你的页面需要展示不同的数据，比如文章详情页，那么你就需要用到动态路由了。 就像 /posts/1 , /posts/2 一样，后面的 /1, /2 就是动态参数。

在路由配置中，我们可以使用 : 来定义动态参数，就像这样：

// router/index.js
{
  path: '/posts/:postid',   // 动态路由，`:postid` 是一个参数
  component: PostShow
}

在 PostShow.vue 中，可以使用 useRoute 来获取当前路由的信息，包括动态参数。

这个动态路由使用到了后端的部分知识点，我们在后续开发真正的项目，数据肯定不是静态的，需要调用到数据库，然后动态路由的那个参数就像一个key帮助我们去找到相应的数据，显示给用户。

// PostShow.vue
<template>
  <div>
    <div>PostShow {{ postid }}</div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute() // 获取当前路由信息
const { postid} = route.params // 获取动态参数 postid
console.log(route)
</script>

这里我们也可以在url导航栏直接输入数据来模拟这个过程：

你可以看到我们这是在浏览器中手动输入的123 ,并没有通过那些vue的那些api，我们就可以得到，vue-route并不是和vue绑死的工具，他是一个可以帮助vue开发的生态周边，不是vue原生的功能。

小 Tips： 动态路由就像一个万能钥匙，可以打开同一页面，但是展示不同的内容，大大提高了我们页面的复用率！

总结： Vue Router，前端开发的得力助手！ 💪

通过今天的学习，我们不仅了解了 Vue Router 的基本用法，包括如何配置路由、使用 router-link 和 router-view、以及如何使用动态路由，还学会了使用 Vite 快速搭建 Vue 项目。掌握了 Vue Router 和 Vite，你的 Vue 项目就仿佛插上了翅膀，能够让你在单页应用的世界里自由飞翔！ 🚀

希望这篇文章对你有所帮助！如果你有任何问题，欢迎在评论区留言交流！ 😉