首页 资讯 社群 我的社区 搜索

前端路由的两种实现方式,内附详细代码

yimo~
2020-01-17 15:55:03

一、前端路由介绍

  • 前端路由主要应用在SPA(单页面开发)项目中。在无刷新的情况下,根据不同的URL来显示不同的组件或者内容。
  • 前端路由的实现原理 :
  1. hash值 + onhashchange事件
  2. 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;
        })
        
  • 以上就是前端路由的两种实现方式。

 

用户评论