前端路由

最新推荐文章于 2022-03-18 16:17:08 发布

锅王

最新推荐文章于 2022-03-18 16:17:08 发布

阅读量292

点赞数

分类专栏： js 文章标签：前端-路由-htm5

本文链接：https://blog.csdn.net/qq_34099161/article/details/51614884

版权

js 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一、方案：通过hash
目录结构如图：
这里写图片描述
只有main,html是完整的html，其他两个都是html片段

①main.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>home</title>
    </head>
    <body>


        <h4>欢迎来到前端路由实现方案主页</h4>
        <a href="#about">跳转到about</a>
        <a href="#brand">跳转到brand</a>

        <script src="../../jquery/jquery-2.2.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">

            window.onhashchange=function(){
                var target=location.hash.slice(1)+".html"
                $.ajax({
                    type:"get",
                    url:target,
                    dataType:"html",
                    success:function(data){
                        $("body").html(data);
                    }
                })
            }


        </script>

    </body>
</html>

②about.html

<h3>这里是关于我们</h3>
<a href="#main">跳转到home</a>
<a href="#brand">跳转到brand</a>

③brand.html

<h3>品牌栏目</h3>
<a href="#main">跳转到home</a>
<a href="#about">跳转到about</a>

二、方案：通过HTML5的新api

html5中戏赠的两个api：
history.pushState
history.replaceState
都可以将页面的url在当前域内任意修改，配合window.onpopstate事件同样可以实现简单的前端路由

锅王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端路由

用前端路由分担后台工作量、包办整个网站的路由这种事感觉有点想太多。但是在单页应用中做一些提高用户友好度的工作还是很有作为的。一、方案：通过hash 目录结构如图：只有main,html是完整的html，其他两个都是html片段①main.html:<!DOCTYPE html><html> <head> <meta charset="UTF-8">
复制链接

扫一扫