1. 프런트엔드 라우팅 소개

2.hash 전단 루트 이동 실현

    indexlist
    
Hash 모드의 프런트엔드 라우팅
    

        
    

        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

셋째,history는 전방 루트의 이동을 실현한다.

  RewriteEngine On
  RewriteBase /
  RewriteRule ^router/history\.html$ - [L]  //    
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . router/history.html [L]   //    

indexlist
History 모드의 프런트엔드 라우팅

        

        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