前端路由的实现

一、前端路由介绍

• 前端路由主要应用在SPA（单页面开发）项目中。在无刷新的情况下，根据不同的URL来显示不同的组件或者内容。

• 前端路由的实现原理 ：

1. hash值 + onhashchange事件

2. history对象 + pushState()方法 + onpopstate事件

二、hash实现前端路由跳转

• HTML代码 ：

indexlist

Hash模式的前端路由

• JavaScript代码 ：

var btn = document.getElementsByTagName('button');

var router = document.getElementById('router');

var routers = [  //配置路由路径

{ path : '/index' , component : '
我是首页
' },

{ path : '/list' , component : '
我是列表页
' }

];

window.location.hash = '/';  //初始化路由

btn[0].onclick = function(){

window.location.hash = '/index';  //点击设置路由跳转indexURL

}

btn[1].onclick = function(){

window.location.hash = '/list';  //点击设置路由跳转listURL

}

window.addEventListener('hashchange' , function(){  //添加hashchange事件，即hash改变会触发回调函数

var hash = window.location.hash;

for(var i=0 ; i

  当我们点击不同的button会呈现不同的显示内容，主要是利用onhashchange事件监听hash值的改变通过与我们设置的路由对比而响应对应的页面。

三、history实现前端路由跳转

• history模式注意事项：

    这种模式需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问对应的URL时 就会返回 404，这就不好看了。

    所以需要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面。这里需要配置文件，具体如下：

Apache示例：

• 创建.htaccess文件 ：

  RewriteEngine On

  RewriteBase /

  RewriteRule ^router/history\.html$ - [L]  //设置路径

  RewriteCond %{REQUEST_FILENAME} !-f

  RewriteCond %{REQUEST_FILENAME} !-d

  RewriteRule . router/history.html [L]  //设置路径

当配置了这个文件之后，当用户随意输入不能匹配的地址，则会返回 router/history.html 这个目录下面，当然还要配合下面的操作。

• 在Apache的config的httpd.config中，将 LoadModule rewrite_module modules/mod_rewrite.so 前面的#号注释去掉，开启这个文件。

• 将下面的 AllowOverride none 配置改为 AllowOverride All

接下来是history模式的代码

• HTML代码(和上面的一样) ：

indexlist

History模式的前端路由

• JavaScript代码 ：

var btn = document.getElementsByTagName('button');

var router = document.getElementById('router');

var routers = [  //配置路由路径

{ path : '/index' , component : '
我是首页
' },

{ path : '/list' , component : '
我是列表页
' }

];

function render(){  //定义一个函数方便重复调用

var path = window.location.pathname;  //获取当前路径

for(var i=0 ; i

• 以上就是前端路由的两种实现方式，如有不正确之处，请大家多多指正！