构建一个完美的前端页面，我们首先要考虑整个页面区域的划分，然后根据不同的地址，往区域中塞入想要表达的内容，这个时候就需要用到前端路由了。

这个路由不是放射wifi的路由器，而是前端进行页面转换的利器。

前端路由的概念

现在前端页面架构中最流行的属SPA架构，什么是SPA架构呢？就是前端整个项目使用一个主界面，然后通过修改地址的方式，变换每个页面模块内的DOM，从而达到了多个页面的效果。

切换页面的过程，仅需要前端的脚本就可以实现了，在比较流行的前端框架中vue，使用vue-router来实现前端页面的转换，称为vue的路由。通俗来讲就是前端页面管理器。

前端路由的两种模式

前端路由有两种模式，一种是hash模式，一种是history模式。

• 1. hash模式

vue-router的默认模式为hash模式，hash模式的原理其实是onhashchange事件。

window.onhashchange=function(){
 let hash=location.hash.slice(1);
 document.body.style.color=hash;
 }

此模式其原理是通过锚点定位原理进行页面的无刷新跳转，触发后url的地址栏会出现#+“xxx”同时在全局的window对象上触发了onhashchange事件，这样在页面锚点哈希改变为某个预设值的时候，通过代码触发对应的页面DOM改变，这样就实现了一个基本的路由。此方法是一种比较直观的路由转换方式，所以前端路由大多采用此模式。

触发onhashchange可以通过两种途径：

通过<a>标签，设置href值进行链接

<a href=”#test”>test</a>

另外一种是通过loaction.hash事件来触发

loaction.hash = “#test”

• 2. history模式

history模式实际是使用h5中新增的两个方法实现的，即pushState(向历史记录中追加一条记录)和replaceState(替换当前页在历史记录中的信息)这两个方法。这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。这两个方法，修改url地址后，浏览器不会立即向后端发起地址请求。

监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的参数。

浏览器访问一个页面时，当前地址的状态信息会被压入历史栈,当调用history.pushState()方法向历史栈中压入一个新的state后，历史栈顶部的指针指向新的state。

window.history.pushState(null, null, "http://www.test.com");

其中第一个参数为状态对象一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，会触发popstate事件，并能在事件中使用该对象。

第二个参数为标题，一般浏览器会忽略此参数，最好不填写。

第三个参数为传入的地址，

History模式下，url的地址和hash模式不同，它不需要#后缀，而是一组正常的地址，看起来好看，但是它需要后端配合，不然会找不到地址。

• 3.hash模式和history模式比较

VueCLI3.0中使用vue-router

路由安装

VueCLI3.0新建项目时，可以选择vue-router插件进行自动化安装，如果安装时没有选择也可以使用npm进行安装

npm install vue-router

路由目录结构

然后VueCLI3.0的结构目录中，router/index.js

配置vue-router

在index.js中引入vue-router

其中引入模块可以采用两种方式，第一种直接import进来，第二种通过

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

两种方式的区别是，第二种打包的时候把各个组件单独打包，利用懒加载模式，可以提高首页加载的速度，避免首页一次性加载过多文件。

vue-router在模块中使用

简单hash路由

实现一个简单的hash模式的路由，在模块中如下<router-link>标签中 to代表路由的地址，<router-view/>用来显示切换的页面。

同样切换页面也可以采用调用方法的形式切换页面

 this.$router.push('/main');

路由的嵌套

在实际项目中经常会遇到，登录页和主页的切换，然后主页中又存在不同子页面的切换，这时候嵌套路由就派上用场了。

页面通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

下面是在VueCLI3.0中使用嵌套路由的栗子

首先定义路由结构json，在嵌套路由的节点添加children。

第一层路由和简单hash路由相同。

子路由的组件

运行结果

导航守卫

我们在进行路由切换地址的时候，经常需要把某些特定的页面进行安全的校验，或者刷新当前页面的时候直接调转到登录页等操作，这个时候就需要用到路由的导航守卫了。

在路由配置json中添加meta字段，标识需要进行安全验证

在main,js中添加全局前置守卫

添加全局后置钩子，可以实现iview LoadingBar的路由加载效果，结束后停止LoadingBar.

router.afterEach(route => {
 iView.LoadingBar.finish();
});

这样就可以做到切换页面时进行安全验证，如果不符合要求跳转到登录页了。

小结

整篇文章，先介绍了前端路由的概念，阐述了hash路由和history路由的两种模式，并对两者进行了比较。最后在VueCLI3.0中使用vue-router进行实例，验证了简单hash路由，嵌套路由和路由的导航卫视。vue-router还有其他高级功能，目前仅针对使用率较高的基础功能进行介绍，欢迎大家进行讨论。

感兴趣的朋友请加关注，谢谢！