前端路由的实现
2019-01-02 本文已影响0人
不见_长安
一、前端路由介绍
-
前端路由主要应用在SPA（单页面开发）项目中。在无刷新的情况下，根据不同的URL来显示不同的组件或者内容。
-
前端路由的实现原理 ：
-
hash值 + onhashchange事件
-
history对象 + pushState()方法 + onpopstate事件
二、hash实现前端路由跳转
- HTML代码 ：
<button>index</button><button>list</button>
<h1>Hash模式的前端路由</h1>
<div id="router">
</div>
- JavaScript代码 ：
var btn = document.getElementsByTagName('button');
var router = document.getElementById('router');
var routers = [ //配置路由路径
{ path : '/index' , component : '<p>我是首页</p>' },
{ path : '/list' , component : '<p>我是列表页</p>' }
];
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<routers.length ; i++){
if(('#'+routers[i].path) == hash){ //通过循环比对hash值来显示不同的内容
router.innerHTML = routers[i].component;
}
}
})
当我们点击不同的button会呈现不同的显示内容，主要是利用onhashchange事件监听hash值的改变通过与我们设置的路由对比而响应对应的页面。
三、history实现前端路由跳转
- history模式注意事项：
这种模式需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问对应的URL时 就会返回 404，这就不好看了。
所以需要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面。这里需要配置文件，具体如下：
Apache示例：
- 创建.htaccess文件 ：
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^router/history\.html$ - [L] //设置路径
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . router/history.html [L] //设置路径
</IfModule>
当配置了这个文件之后，当用户随意输入不能匹配的地址，则会返回 router/history.html 这个目录下面，当然还要配合下面的操作。
-
在Apache的config的httpd.config中，将 LoadModule rewrite_module modules/mod_rewrite.so 前面的#号注释去掉，开启这个文件。
-
将下面的 AllowOverride none 配置改为 AllowOverride All
接下来是history模式的代码
- HTML代码(和上面的一样) ：
<button>index</button><button>list</button>
<h1>History模式的前端路由</h1>
<div id="router">
</div>
- JavaScript代码 ：
var btn = document.getElementsByTagName('button');
var router = document.getElementById('router');
var routers = [ //配置路由路径
{ path : '/index' , component : '<p>我是首页</p>' },
{ path : '/list' , component : '<p>我是列表页</p>' }
];
function render(){ //定义一个函数方便重复调用
var path = window.location.pathname; //获取当前路径
for(var i=0 ; i<routers.length ; i++){
if('/router'+routers[i].path == path){
router.innerHTML = routers[i].component
}
}
}
render();
btn[0].onclick = function(){
history.pushState(routers[0].component , ' ' , 'index'); //第二个参数为标题，因这个参数不完善，可以不写，但是不能为空，我们用空字符代替
render();
}
btn[1].onclick = function(){
history.pushState(routers[1].component , ' ' , 'list');
render();
}
window.addEventListener('popstate' , function(ev){ //用popstate监听url地址的变化，以此来改变页面的显示
router.innerHTML = ev.state;
})
- 以上就是前端路由的两种实现方式，如有不正确之处，请大家多多指正！
