1 路由
1.1 后端路由
- 概念：根据不同用户的 URL 请求，返回不同的内容
- 本质：URL 请求地址与服务器资源之间的对应关系
1.2 前端路由 - 概念：根据不同的用户事件，显示不同页面的内容
- 本质：用户事件与事件处理函数之间的对应关系
1.3 实现简易前端路由
基于 URL 的 hash 实现 （点击菜单的时候改变 URL 的 hash，根据 hash 的变化控制组件的切换）
Vue-router基本介绍
Vue-router是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，可以非常方便的用于 SPA 应用程序的开发。
Vue Router 包含的功能有：
- 支持 HTML5 历史模式或 hash 模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
Vue-router使用步骤
-
引入相关库文件
-
添加路由链接
-
添加路由填充位
-
定义路由组件
-
配置路由规则并创建路由实例
-
把路由挂载到 Vue 根实例中
路由模式
- hash: 兼容所有浏览器，包括不支持 HTML5 History Api 的浏览器，例http://www.abc.com/#/index，hash值为#/index，hash的改变会触发hashchange事件，通过监听hashchange事件来完成操作实现前端路由。hash值变化不会让浏览器向服务器请求。
- history: 兼容能支持 HTML5 History Api 的浏览器，依赖HTML5 History API来实现前端路由。没有#，路由地址跟正常的url一样，但是初次访问或者刷新都会向服务器请求，如果没有请求到对应的资源就会返回404，所以路由地址匹配不到任何静态资源，则应该返回同一个index.html 页面，需要在nginx中配置。
- abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。