前端路由router的使用

一. 单页面富应用（SPA）

单页面富应用的理解：

• 单页面富应用的英文是single-page application，简称SPA；
• 整个Web应用只有实际上只有一个页面，当URL发生改变时，并不会从服务器请求新的静态资源；
• 而是通过JavaScript监听URL的改变，并且根据URL的不同去渲染新的页面；

如何可以应用URL和渲染的页面呢？前端路由

• 前端路由维护着URL和渲染页面的映射关系；
• 路由可以根据不同的URL，最终让我们的框架（比如Vue、React、Angular）去渲染不同的组件；
• 最终我们在页面上看到的实际就是渲染的一个个组件页面；
  

二. 前端路由的原理

前端路由是如何做到URL和内容进行映射呢？

• 监听URL的改变。

1. 原理
2. 改变URL的时候，同时不引起页面的刷新
3. 当监听到URL发生变化时，我们可以通过自己判断当前的URL，决定到底渲染什么样的内容。

URL发生变化，同时不引起页面的刷新有两个办法：

• 通过URL的hash改变URL；
• 通过HTML5中的history模式修改URL；
  

2. URL的hash

• URL的hash也就是锚点(#), 本质上是改变window.location的href属性；
• 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新；
• 会直接在原来url的后面加a元素的href

//html部分
<div id="app">
        <a href="#/home">首页</a>
        <a href="#/about">关于</a>
        <div class="page"></div>
    </div>
//script部分
<script>
        const page=document.querySelector('.page')
        window.addEventListener('hashchange',()=>{
      //监听hash的变化
            console.log('有变化',location.hash);   //location.hash获取当前的hash
            
            switch (location.hash) {
   
                case '#/home':
                page.innerHTML='关于'
                    break;
                case '#/about':
                page.innerHTML='首页'
                    break;
                default:
                page.innerHTML=''
                    break;
            }
        })
    </script>

注意：

• hash的优势就是兼容性更好，在老版IE中都可以运行；
• 但是缺陷是有一个#，显得不像一个真实的路径；
  

3. HTML5的History

history接口是HTML5新增的, 它有l六种模式改变URL而不刷新页面：

• replaceState：替换原来的路径；
• pushState：使用新的路径；
• popState：路径的回退；
• go：向前或向后改变路径；
• forword：向前改变路径；
• back：向后改变路径；

<div id="app">
        <a href="home">首页</a>    //a元素的默认行为是会跳转到一个新的页面 
       
        <a href="/about">关于</a>
        <div class="page"></div>

        <script>
            const page=document.querySelector('.page')
            const as=document.getElementsByTagName('a')
            for(let a of as){
   
                a.addEventListener('click',(e)=>{
   
                    e.preventDefault();   //阻止a元素的默认行为
                    const href=a.getAttribute('href')  //获取a元素的自由属性
                    // console.log('a元素被点击');
                    // history.pushState({},'','abc')//第三个参数是要跳转的新的路径
                    history.pushState({
   },'',href)
                    //第三个属性如果传入的是'abc',他会在原来的路径下跳转
                    //如果传入的是'/abc',他会跳转到一个全新的路径，不在原来的路径下
                    //路径指的是端口后面的东西
                    urlChange()
                })
            }

            //执行返回操作时，依然来到urlchange
            window.addEventListener('popstate',urlChange)

            //监听url的变化
            function urlChange(){
                   
                console.log(location.pathname);//location.pathname是取当前路径，
                                               //相当于上面的href
                switch (location.pathname) {
       //路径指的是端口后面的东西
                case '/home':
                page.innerHTML='关于'
                    break;
                case '/about':
                page.innerHTML='首页'
                    break;
                default:
                page.innerHTML=''
                    break;
            }
        }
        </script>
    </div>

//18行

三. react-router

React项目的可用的路由库是React-Router,当然这也是官方支持的。它也分为：
react-router 核心组件
react-router-dom 应用于浏览器端的路由库（单独使用包含了react-router的核心部分）