老杜Vue笔记⑥ 路由route-Toy模板网

这篇具有很好参考价值的文章主要介绍了老杜Vue笔记⑥ 路由route。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

动力节点vue2+3视频课程

路由route

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

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

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

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

6.2 路由route与路由器router

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

6.3 使用路由

实现功能描述

老杜Vue笔记⑥ 路由route

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

老杜Vue笔记⑥ 路由route

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