vue前端路由

路由的基本概念与原理

路由

路由是一个比较广义和抽象地概念，路由地本质就是对应关系
在开发中,路由分为：

• 前端路由
• 后端路由

后端路由

概念：根据不同的用户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的基本使用步骤

基本使用步骤

1. 引入相关的库文件
2. 添加路由链接
3. 添加路由填充位
4. 定义路由组件
5. 配置路由规则并创建路由实例
6. 把路由挂载到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标签-->