路由的基本概念与原理
路由
路由是一个比较广义和抽象地概念,路由地本质就是对应关系
在开发中,路由分为:
- 前端路由
- 后端路由
后端路由
概念:根据不同的用户URL请求,返回不同的内容
本质:URL请求地址与服务器之间的对应关系
SPA (Single Page Application)
- 后端渲染(存在性能问题)
- Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退操f作)
- SPA (Single PageApplication)单页面应用程序:整个网站只有一个页面,内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
- SPA实现原理之一:基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求)
- 在实现SPA过程中,最核心的技术点就是前端路由
前端路由
概念:根据不同的用户事件,显示不同的页面
本质:用户事件与事件处理函数之间的对应关系
前端路由负责事件监听,触发事件后,通过事件函数渲染不同内容
实现简单前端路由
基于URL中的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)
// 监听window的onhashchange事件,根据获取到的最新的hash值,切换要显示的组件的名称
window.onhashchange = function() {
//通过location.hash获取到最新的hash值
}
Vue Router
Vue Router是vue.js官方的路由管理器。和vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发。
Vue Router包含的功能:
- 支持HTML5历史模式或hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
Vue-router的基本使用步骤
基本使用步骤
- 引入相关的库文件
- 添加路由链接
- 添加路由填充位
- 定义路由组件
- 配置路由规则并创建路由实例
- 把路由挂载到Vue根实例中
// 1. 引入相关的库文件
<!--导入vue文件,为全局window对象挂载Vue构造函数-->
<script src="./lib/vue_2.5.2.js"></script>
<!--导入vue-router文件,为全局window对象挂载VueRouter构造函数-->
<script src="./lib/vue-router_3.0.2.js"></script>
<div id="app">
// 2.添加路由链接
<!--router-link 是vue中提供的标签,默认会被渲染成为a标签-->