1：什么是单页应用程序（single page application）
所有得功能在一个html页面上实现
2：单页面应用程序的优缺点
优点：按需更新性能高，开发效率也高，用户的体验较好
缺点：学习成本高，第一次加载慢，对seo搜索引擎不太优化
3：应用场景
单页面应用（系统类网站、内部网站，文档类网站，移动端站点）
4：什么是路由？
路由就是一种映射关系
5：Vue中的路由是什么？
vue中路由就是路径和组件之间的映射关系，通过路由我们可以知道，访问哪个路径来确定渲染哪个组件
6：VueRouter介绍
作用：修改地址栏路径，切换显示匹配的组件
说明：Vue官方的一个路由插件，是一个第三方包
官网：Vue Router
7：VueRouter的使用步骤（5+2）
5个基础步骤（固定）
如果没有yarn可先进行安装
npm install -g yarn
1：下载：下载VueRouter模块到当前工程，版本3.6.5
yarn add vue-router@3.6.5
2：在main.js入口文件中引入
import VueRouter from 'vue-router'
3：在main.js入口文件中注册
Vue.use(VueRouter)
4：在main.js创建路由对象
const router = new VueRouter()
5：在main.js注入，将路由对象注入到new Vue实例中，建立关联
new Vue({ render: h => h(App), router }).$mount('#app')
2个核心步骤
1：创建需要的组件（views目录），配置路由规则（就是组件和路径的映射关系）
2：配置导航，配置路由出口（路径匹配的组件显示的位置），router-view(组件展示的位置)
8：组件存放目录问题
组件分类：.vue文件分2类；页面组件&复用组件，注意：都是.vue文件（本质无区别）
问题1：组件分类有哪两类？分类的目的？
页面组件和复用组件，目的就是为了维护比较方便
问题2：放在什么文件夹？作用分别是什么？
页面组件-views文件夹 =>配合路由，页面展示
复用组件-components文件夹 => 封装复用
9：路由封装到指定的文件中
将路由组件从main.js文件中抽离出来，封装成固定的路由文件，在main.js文件中导入封装好的路由文件index.js，在vue实例中进行注册。
入口文件main.js
封装的index.js文件
路由模块的封装抽离的好处是什么？
拆分模块，利于维护
如何快速引入组件？
可以基于 @就是src目录，从src目录下出发找组件
10：使用router-link替代a标签并实现高亮（App.vue）
声明式导航
vue-router提供了一个全局组件router-link（取代a标签）
1：能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需#
2：能高亮，默认就会提供类名，可以通过类名设置高亮样式
11：声明式导航-自定义两个类名
12：声明式导航-跳转传参
查询参数传参(参数名和值写在path路径上面)：
代码演示
动态路由传参（参数值写在path路径上面）
代码示例：
两种传参方式的区别：
动态路由参数可选符（?）
13：路由重定向
网页打开，url默认的路径是 / ，而/又不能匹配到组件，页面打开因为匹配不到任何组件所以会显示空白
说明：重定向->匹配path后，强制跳转path的路径
语法：{path:匹配路径，redirect：重定向到的路径}
示例：
14：配置路由 " * "，任意匹配
问题：当用户在地址栏上输入未知的路径时，路径无法映射到对应的组件，页面就会出现空白页面。
解决：通过配置路由 path ："*" ，来进行任意路径的匹配，当用户访问未知的路径，可以配置到系统中的404页面
位置：配在路由的最后，为什么要配在路由的最后面是因为，如果用户访问的路径有对应的组件映射，配在前面就会导致 * 直接拦截下来跳转到 * 所对应的组件，因为路由是按照从上到下的方式进行匹配的。
示例：
15：两种路由模式（hash，history）的区别
问题：路由的路径看起来不自然，有# ，能否切成真正的路径形式，即不带#的那种
路由模式有两种。
hash路由（默认）：
history路由（常用）：
16：编程式导航-两种路由跳转方式
第一种方式：push路径跳转
第二种方式：在路由中配置name，通过name进行跳转组件
总结：
1：通过路径跳转（简单方便）
2：通过路由名字跳转（适合路径长的场景）需要在路由文件中进行配置name
17：编程式导航-通过path和name跳转传参方式
