目录
2.编写router配置项 在src/router/index.js 文件中
3.实现切换（active-class可配置高亮样式） router-link
1.对 SPA 应用的理解
1. 单页 Web 应用（single page web application，SPA）。
2. 整个应用只有
一个完整的页面
。
3. 点击页面中的导航链接
不会刷新
页面，只会做页面的
局部更新。
4. 数据需要通过 ajax 请求获取。
2.路由的理解
1. 什么是路由?
1. 一个路由就是一组映射关系（key - value）
2. key 为路径, value 可能是 function 或 component
2. 路由分类
1. 后端路由：
1) 理解：value 是 function, 用于处理客户端提交的请求。
2) 工作过程：服务器接收到一个请求时, 根据
请求路径
找到匹配的
函数 来处理请求, 返回响应数据。
2. 前端路由：
1) 理解：value 是 component(组件)，用于展示页面内容。
2) 工作过程：当浏览器的路径改变时, 对应的组件就会显示。
3.路由的基本使用
路由
1.理解：一个路由（route）就是一组映射关系(key-value),多个路由需要路由器(router)进行管理
2.前端路由：key是路径，value是组件
基本使用
1.安装vue-router插件 和 应用插件
vue-router是
vue 的一个插件库，专门用来实现 SPA 应用
注意点1：vue-router3只能对应vue2版本下载：npm i --save [email protected]
vue-router4才能对应vue3版本 不然会报错注意点2：vue-router是一个插件，需要在 mian.js中去引入：import VueRouter from 'vue-router'应用：
Vue.use(VueRouter);引入和应用vue-router后就可以写一个全新的配置项 router 路由器
2.编写router配置项 在src/router/index.js 文件中
注意：要在 main.js 中引入 路由器：
import router from './router/index.js',
然后再vm里面，添加router配置项。
3.实现切换（active-class可配置高亮样式） router-link
<!-- router-link标签用 to 实现页面的跳转 最终会转为a标签 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>4.指定展示位置 router-view
<!-- 指定组件的呈现位置 -->
<router-view></router-view>几个注意点
1.路由组件通常放在 src/pages文件夹中，一般组件通常放在components文件夹中。
2.通过路由切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3.每个组件都有自己的 $route 属性，里面存储着自己的路由信息
4.整个应用只有一个router,可以通过组件的 $router属性 获取到
VC上面的 $route里面是路由规则 ，每个组件自己都有，但是里面的信息不同。
$router 是路由器，不同路由里面的 $router 是相同的，因为整个app里面只有一个路由器