前端路由router的使用

最新推荐文章于 2024-08-05 19:03:01 发布

小辰好好学

最新推荐文章于 2024-08-05 19:03:01 发布

阅读量2.3k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_63331193/article/details/124229288

版权

本文详细介绍了前端路由在单页面应用中的作用，重点解析了react-router的使用，包括BrowserRouter和HashRouter、Link和NavLink、Route以及Switch组件的用法。此外，还探讨了高级特性如路由嵌套、手动跳转、参数传递等，帮助开发者更好地掌握前端路由的运用。

摘要由CSDN通过智能技术生成

一. 单页面富应用（SPA）

单页面富应用的理解：

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

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

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

二. 前端路由的原理

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

监听URL的改变。

原理
改变URL的时候，同时不引起页面的刷新
当监听到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>