现在好多网站都是单页面应用就是spa（single page application），简单来说就是整个网站只有一个html页面，用户看到的页面跳转其实是这个html页面里面dom内容的切换。
单页面应用有一个最大的优势就是性能高、反应快，对于我们开发者来说，用现代化的开发工具，单页面应用也更方便开发和维护。
使用vue做单页面应用，必不可少的就是vue-router了，我们现在就开始一个vue-router的入门教程
需要注意的是
vue3对应的vue-router的版本是vue-router4
我们知道路面切换的时候，浏览器地址栏的地址会变化，相应的我们页面的内容也要变化，vue-router做的工作就是做到一个浏览器上的地址和页面内容的一个映射。比如一个地址对应一个页面内容。
用vue-router的专业术语来说，是路由和组件的的映射
组件我们都知道是什么了，路由可能对于我们的初学者来说可能有点陌生
比如一个页面的url是
http://www.test.com/index
它的域名是www.test.com，域名后面的/index，就是这个页面的路由
http://www.test.com/user/detail
这个页面的路由就是/user/detail
如果域名后面没有内容了
http://www.test.com/
那么这个url对应的路由就是根路由，/
vue-roueter做的工作就是把这些路由和我们的vue组件对应起来，比如
/index => index.vue
/user/detail => userDetail.vue
/ => index.vue
理解了vue-router的功能以后，我们来学习一下vue-router的写法，记住就可以了
1）安装vue-router
npm install vue-router@4
注意安装的版本是4，所以在vue-router后面添加了@4
2）第一个vue-router例子
第一个小dome我们来写两个简单的页面，一个首页叫index，一个列表页叫list
我们先来创建这两个vue文件，按照惯例，在src文件夹下创建一个文件夹views，专门用来存放我们页面的vue文件，然后创建这两个文件index.vue和list.vue
里面的内容写一个字符串区分一下就好了
index.vue
<template>
<div>这里是首页</div>
</template>
<script>
export default {}
</script>
<style></style>
list.vue
<template>
<div>这里是列表页</div>
</template>
<script>
export default {}
</script>
<style></style>
页面我们已经准备好了，下面需要把用vue-router把页面的路由对应起来，这里就是vue-router的重点用法了
1）在src下创建一个router.js的文件，在这个文件里来写关于vue-router的代码，
import { createRouter, createWebHistory } from 'vue-router' // 从vue-router中导入两个方法
import index from './views/index' // 把页面的组件导入进来
//这里只写了index，没有写扩展名.vue， 因为webpack会自动去找index.vue，这样我们的代码就显得比较简洁
import list from './views/list' // 把页面的组件导入进来
const routes = [
// 定义一个数组，里面存放我们路由和组件的映射关系
{
path: '/', // 比如这里 / 表示根路由， 对应index这个组件
component: index,
},
{
path: '/list',
component: list,
},
]
const router = createRouter({
// 通过导入进来的vue-router的createRouter方法创建我们的路由
history: createWebHistory(), // 这个参数现在不用管，以后我们会仔细讲解
routes, // 这里把我们上面的映射数组传过来
})
export default router // 最后使用原生的js导出我们创建的router对象，方便在main.js中使用
2）修改main.js
我们上面写好了router配置，需要在main.js中使用它
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入我们的创建好的router对象 同样没有写.js，webpack会自动去查找
createApp(App)
.use(router) // 让我们的vue应用使用router
.mount('#app')
3）修改App.vue
<template>
<div></div>
<router-view></router-view> // 增加了router-view组件，表示我们vue-router控制的内容要在这里显示
</template>
<script>
export default {
name: 'App',
}
</script>
<style></style>
经过这3步，我们的router已经生效了
把我们的小项目跑起来
npm run serve
跑起来以后，在浏览器里输入
http://localhost:8080/
显示
在浏览器里输入
http://localhost:8080/list
显示
好了，我们第一个vue-router的例子到这里就完成，实现了一个最简单的路由到组件的映射，
这节课要写或者改动的文件还挺多，初学者一定要自己写一写。
