Vue路由解析

hash模式解析

hash模式使用的是#符合，可以通过window.location中的hash属性将路由值获取到，并且路由的地址是在服务地址下可访问到的资源位置路径下加的，所以当热更新的时候不会出现404页面的情况

<a href="#/a">A页面</a>
    <a href="#/b">B页面</a>
    <a href="#/c">C页面</a>
    <div id="app"> 
    </div>
    <script>
        var routes=[
            {
                path:'/a',
                name:'a',
                component:'<span>A页面的内容</span>'
            },
            {
                path:'/b',
                name:'b',
                component:'<span>B页面的内容</span>'
            },
            {
                path:'/c',
                name:'c',
                component:'<span>C页面的内容</span>'
            }
        ];
        var box=document.getElementById('app');
        window.addEventListener('hashchange',function(){
            console.log('hash变化');
            console.log(location.hash);
            let hash=location.hash;
            var route=routes.find(v=>'#'+v.path==hash)
            console.log(route);
            app.innerHTML=route.component;
        })
    </script> 

history模式解析

主要是通过history.pushState执行页面跳转改变路由地址的，但是这个路由所跳转的页面，会导致浏览器按照路由地址请求这个地址里面的资源，由于这个地址里没有这个资源会导致404错误

所以就引到了Vue项目上线到服务器的时候，就会出现404访问不到页面的情况

热更新会导致当前页面有一个刷新的动作，就会导致浏览器按照路由地址请求这个地址里面的资源，由于没有这个资源所以导致会发生404

    <a href="/a">A页面</a>
    <a href="/b">B页面</a>
    <a href="/c">C页面</a>
    <div id="app"> 
    </div>
    <script>
        var routes=[
            {
                path:'/a',
                name:'a',
                component:'<span>A页面的内容</span>'
            },
            {
                path:'/b',
                name:'b',
                component:'<span>B页面的内容</span>'
            },
            {
                path:'/c',
                name:'c',
                component:'<span>C页面的内容</span>'
            }
        ];
        var box=document.getElementById('app');
        var aList=document.querySelectorAll('a');
        aList.forEach(v=>{
            v.addEventListener('click',function(e){
                e.preventDefault();//点击a标签阻止页面跳转
                console.log(e);
                //pushState是执行可以跳转到某一个页面
    //参数分别是  路由记录的参数(不是告诉路由对象的) 路由标题  路由跳转的地址(告诉路由对象的)
                history.pushState(null,      '',    e.target.href);//操作浏览器路由的前进后退
                console.log(location);
                var pathname=location.pathname;
                // var route=routes.find(v=>'#'+)
                var route=routes.find(v=> v.path==pathname)
                console.log(route);
                app.innerHTML=route.component;
            });
        })

    </script>