Vue3 入门笔记 ---- 使用vue-router配置路由

这个系列的笔记重点会放在怎么样利用Vue3把项目架设起来并跟后端API互动，不会介绍Vue的基础特性，关于Vue的基础特性可以参考这个视频四个小时带你快速入门Vue，我是看这个入门的，觉得还不错。

代码地址： https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes

同时发布于我的个人站点：http://panzhixiang.cn/article/2022/10/17/56.html

路由的简单介绍

不论是前端还是后端，都有路由的概念，可以这样简单地理解路由： 路由是指向不同页面或者功能的标记。

比如在本地运行vue3的项目之后，可以通过浏览器打开http://localhost:5173/ 这个地址，这个本地地址的最后一个斜杠 / 其实就是一个路由，一般称之为跟路由，vue3会把浏览器引导到vue3的默认首页。

在比如， https://cn.vuejs.org/guide/essentials/application.html 中的 /guide/essentials/也是一个路由，它会将用户指向一固定的页面。

vue-router

vue-router是vue官方推荐的路由工具，有v3和v4两个版本，3是和vue2搭配使用的，4是和vue3搭配使用的，我们使用的就是v4版本。

安装vue-router

安装很简单，就一条命令

npm install vue-router

创建router配置代码

在src目录下创建一个router目录，然后在router目录里面创建一个index.js文件，可以对照开头链接里面的代码检查目录结构是否正确。

在index.js里面写以下代码：

import {
    createRouter, createWebHashHistory