# 6、Vue全家桶-前端路由 # 1.1路由 概叙 路由是一个比较广义 和抽象的概念，**路由的本质就是对应关系**。 在开发中，路由分为: ● 后端路由 ● 前端路由 ## 1.后端路由 ● 概念:根据不同的**用户URL请求**，返回不同的内容 ● 本质:**URL请求地址**与**服务器资源**之间的对应关系  ## 2\. SPA (Single Page Application) ~~~ ● 后端渲染(存在性能问题) ● Ajax前端渲染(前端渲染提高性能，但是不支持浏览器的前进后退操作) ● SPA (Single Page Application)单页面应用程序:整个网站只有一个页面， 内 容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作 ● SPA实现原理之一: 基于URL地址的hash (hash的变化会导致浏览器记录访问历 史的变化、但是hash的变化不会触发新的URL请求) ● 在实现SPA过程中，最核心的技术点就是前端路由 ~~~ ## 2.前端路由 ● 概念:根据不同的**用户事件**，显示不同的页面内容 ● 本质:**用户事件**与**事件处理函数**之间的对应关系  ## 3.实现简易前端路由 ● 基于URL中的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)  ~~~ //监听window 的onhashchange 事件，根据获取到的最新的hash 值，切换要显示的组件的名称 window.onhashchange = function () { //通过lgcation.hash 获取到最新的hash 值 } ~~~ # 1.2 Vue Router **Vue Router**(官网:[https://router.vuejs.org/zh/](https://router.vuejs.org/zh/))是Vue.js 官方的**路由管理器**。 它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。 Vue Router 包含的功能有: ~~~ ● 支持HTML5历史模式或hash模式 ● 支持嵌套路由 ● 支持路由参数 ● 支持编程式路由 ● 支持命名路由 ~~~