面向小白编程：从项目创建到 Vue Router 的基本使用

本文将结合官方文档，面向小白，详细介绍从Vue项目创建，到 Vue Router 的概念及使用。如果你是一位刚刚接触前端开发的小白，不用担心！我们将在接下来的几篇文章中以简单易懂的方式，一步步地引导你了解 Vue Router，并教你如何在 Vue 项目中使用。

什么是 Vue Router ？

Vue Router 是 Vue 的官方路由管理器，用于构建单页面应用（SPA）。Vue Router 通过管理前端路由，使得在 SPA 中切换页面、导航和传递参数等操作更加容易和灵活。

什么是多页应用与单页应用？

单页应用和多页应用是两种不同的Web应用程序架构。

多页应用： 我们知道常规网站都是由多个页面组成的，每个页面构建不同的内容。所以导致每次点击链接或按钮时，页面都会重新加载，可能会出现一些短暂的白屏或加载过程。这样的网站就是 多页应用（Multiple Page Application，MPA）。

单页应用： 通俗来讲就是只有一个页面的网站，我们浏览不同的内容或页面，整个网站不会重新加载，只是页面的部分内容在变化。这样的网站就是 单页应用（Single Page Application，SPA）。

我们使用 Vue 时就会发现，Vue 项目只有一个HTML文件，也就是只有一个页面，所以我们通常使用Vue来构建单页应用，而就需要使用Vue Router来构建前端路由，实现URL变换，渲染不同内容。

如何使用 Vue Router

一、构建vue项目

目前两种可用的构建项目方式有CLI创建以及Vite创建。

使用CLI

1. 安装Vue项目： 在在终端中，输入以下命令安装CLI：

   npm install -g @vue/cli

   

2. 创建Vue项目：

   在终端中，使用以下命令创建项目：

   vue create my-vue-project

   my-vue-project是你的项目名称，可自行更改。

3. 选择项目配置：

   在项目创建过程中，CLI会提示你选择项目的配置。

   选择Vue版本，这里要注意，如果你选择的是Vue2，那么Vue-Router则需安装第三3版本，Vue3则对于第四版本。

   

   选择包管理器。

   

   项目创建完成。

   

4. 进入项目目录：

   Vue CLI将自动下载项目依赖并配置项目结构。等待安装完成后，进入项目目录：

   cd my-vue-project

5. 运行项目：

   npm run serve

   打开地址即可访问。

   

   项目初始化如下：

   

或者使用Vite

1. 安装Vite：

   npm init vite@latest my-vue-project --template vue

   回车默认同意安装：

   

   选择框架：

   

   选择语言：

   

   创建完成。

   

2. 进入项目目录：

   cd my-vue-project

3. 安装依赖：

   npm install

4. 运行项目：

   npm run dev

   

   用Vite创建项目的界面如下：

二、安装和配置Vue-Router

使用包管理器安装：

# 使用 npm 安装
npm install vue-router@4

# 或使用 yarn 安装
yarn add vue-router@4

#注意：
#vue2则需安装vue-router@3

三、创建路由实例

我们一般会在src下创建一个router文件夹，在文件夹内创建一个inedx.js（src/router/index.js）中配置路由实例。

//index.js

// 引入用于创建路由器实例的函数和创建WebHistory模式的对象
import { createRouter,createWebHistory } from "vue-router";

// 定义路由配置数组，包含的每个对象代表一个路由规则
const routes = [
    {
        path: '/about',
        name: 'about',
        component: () => import('../views/About.vue'),// 组件懒加载
    },
    {
        path: '/home',
        name: 'home',
        component: () => import('../views/Home.vue'),
    }
]

// 创建路由器实例，并设置模式为WebHistory
const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

四、集成到 Vue 实例

将创建的路由实例集成到你的 Vue 实例中，通常在 main.js 文件中进行。

//main.js

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

//导入之前定义好的路由实例
import router from './router'

const app = createApp(App);

//用use方法将路由注入到当前的应用实例中
app.use(router)
app.mount('#app')

五、创建视图组件

在src目录下创建views文件夹，这里将存放项目需要用到的所有视图，这里我们创建 Home.vue 和 About.vue两个视图。

<!-- Home.vue -->

<template>
    <div>
        这是Home页面
    </div>
</template>

<script setup>
</script>

<style scoped>
</style>

<!-- About.vue -->

<template>
    <div>
        这是About页面
    </div>
</template>

<script setup>
</script>

<style scoped>
</style>

如果我们想将这两个页面渲染到页面上，则需要用到 <router-link> 与 <router-view>。

六、导航链接

在应用中使用 <router-link> 标签来创建导航链接，使用户能够点击链接进行页面切换。

现在我们想在App.vue中将Home与About两个页面进行切换：

<!-- App.vue -->

<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

这里的to是<router-link>标签的一个属性，用于指定导航链接要跳转的目标路由。也可以通过动态绑定name等方式进行跳转。

<router-link :to="{ name: 'about' }">About</router-link>

我们打开项目发现，点击链接，URL地址栏确实变了，但是页面并没有变化。

这是因为我们还少了一步，通俗来说，就是还要挖个坑，专门呈现需要渲染的页面内容，它就是 <router-view>。

七、在模板中使用 <router-view>

在应用模板中使用 <router-view> 标签，这是用来显示当前路由匹配到的组件的地方。

这里，我们直接将Home.vue 和 About.vue 页面的内容渲染到 App.vue中

<!-- App.vue -->

<template>
  <div id="app">
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <!-- 显示匹配的内容 -->
    <router-view></router-view>
  </div>
</template>

这样，我们就能实现点击链接进行页面切换。

最后

看到这里希望你对Vue Router已经有了初步的认识，本文内容只是简单讲解了一下如何创建Vue项目、什么是Vue Router，以及如何实现简单的路由跳转，后续还有许多深入的知识，类似路由映射、嵌套路由、路由参数传递、导航守卫等等，我们在后续的文章中还会继续介绍。

总的来说，Vue Router 是前端学习的重要一步。希望你能够充分理解和利用 Vue Router 的强大功能，为你的Vue项目带来更加出色的用户交互体验。祝学习愉快！

已将学习代码上传至 github，欢迎大家学习指正！

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 "点赞 收藏+关注" ，感谢支持！！