老杜Vue笔记⑥ 路由route

动力节点vue2+3视频课程

路由route

6.1 传统web应用vs单页面web应用

传统web应用
传统web应用，又叫做多页面web应用：核心是一个web站点由多个HTML页面组成，点击时完成页面的切换，因为是切换到新的HTML页面上，所以当前页面会全部刷新。

单页面web应用（SPA：Single Page web Application）
整个网站只有一个HTM页面，点击时只是完成当前页面中组件的切换。属于页面局部刷新。


单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。单页面的跳转仅刷新局部资源。因此，对单页应用来说模块化的开发和设计显得相当重要。
单页面应用的优点：
1、提供了更加吸引人的用户体验：具有桌面应用的即时性、网站的可移植性和可访问性。
2、单页应用的内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。
3、单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象
4、单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。
5、良好的前后端分离。后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端
单页面应用的缺点：
1、首次加载耗时比较多。
2、[SEO](https://so.youkuaiyun.com/so/search?q=SEO&spm=1001.2101.3001.7020" \t "https://blog.youkuaiyun.com/weixin_66557048/article/details/_blank)问题，不利于百度，360等搜索引擎收录。
3、容易造成CSS命名冲突。
4、前进、后退、地址栏、书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。
单页面和多页面的对比

目前较为流行的是单页面应用的开发。
如果想使用Vue去完成单页面应用的开发，需要借助Vue当中的路由机制。

6.2 路由route与路由器router

路由：route
路由器：router
每一个路由都由key和value组成。
key1+value1===>路由route1
key2+value2===>路由route2
key3+value3===>路由route3
…
路由的本质：一个路由表达了一组对应关系。
路由器的本质：管理多组对应关系。
Vue中路由的工作原理：

6.3 使用路由

1. 实现功能描述

1. 根据静态页面提取两个组件：Tea.vue和Fruit.vue

1. vue-router也是一个插件，安装vue-router
   1. vue2要安装vue-router3
      1. npm i vue-router@3
   2. vu3要安装vue-router4
      1. npm i vue-router@4
2. main.js中引入并使用vue-router
   1. 导入：import VueRouter from ‘vue-router’
   2. 使用：Vue.use(VueRouter)
   3. new Vue时添加新的配置项：一旦使用了vue-router插件，在new Vue的时候可以添加一个全新的配置项：router

1. router路由器的创建一般放在一个独立的js文件中，例如：router/index.js
   1. 创建router目录
   2. 创建index.js，在index.js中创建路由器对象，并且将其暴露。然后在main.js文件中引入该路由器即可。

1. 使用router-link标签代替a标签（App.vue中）

router-link标签最终编译之后的还是a标签。vue-router库帮助我们完成的。

1. 添加激活样式

使用active-class属性，在激活时添加样式：selected