国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

利用hash或history實(shí)現(xiàn)單頁面路由

scola666 / 1434人閱讀

摘要:只有在用戶點(diǎn)擊前進(jìn)回退按鈕,或,,服務(wù)器端結(jié)合前端,可以用以下方式處理此處的為單頁面容器,即放置本文中的所有代碼文件歡迎交流

[toc]

在chrome(版本 70.0.3538.110)測(cè)試正常
編寫涉及:css, html,js, node(koa)

在線演示codepen

html代碼
 
hash 路由
hash 1 hash 2 hash 3 other
history 路由
css代碼
.hash a {
    display: inline-block;
    padding: 5px 8px;
    margin: 10px 10px 10px 0;
    font-size: 15px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    color: #fff;
    background-color: rgb(17, 130, 236);
}
.title{
    margin: 10px 0;
    padding: 5px 8px;
    border-left: rgb(168, 168, 168) solid 2px;
    background-color: rgb(230, 230, 230);
}
.hash div:last-child{
    padding: 6px;
    min-height: 100px;
    background-color: rgb(243, 243, 243);
}

.history{
    margin: 10px 0;
}
.history button {
    padding: 8px 10px;
    border: 0;
    color: #fff;
    background-color: rgb(250, 144, 44);
}
.history div:last-child{
    margin-top: 10px;
    padding: 6px;
    min-height: 100px;
    background-color: rgb(243, 243, 243);
}
JavaScript代碼 hash方式
class HashRoute {
    setRoute() {
        const commandObj = {
            one: "page one",
            two: "page two",
            three: "page three"
        }
        const hashRoute = location.hash ? location.hash.slice(2) : "one"
        let re = commandObj[hashRoute]

        document.getElementById("hashContent").innerHTML =  re ? re : "page not find"
    }

    skip(path) {
        window.location.hash= `#/${path}`
    }

    init() {
        window.addEventListener("DOMContentLoaded", this.setRoute)

        // 1.直接更改瀏覽器地址,在最后面增加或改變#hash; 
        // 2.通過改變location.href 或 location.hash的值; 
        // 3.通過觸發(fā)點(diǎn)擊帶錨點(diǎn)的鏈接; 
        // 4.瀏覽器前進(jìn)后退可能導(dǎo)致hash的變化,前提是兩個(gè)網(wǎng)頁地址中的hash值不同
        window.addEventListener("hashchange", this.setRoute)
    }
}

const hashRoute = new HashRoute()

hashRoute.init()
history 方式 瀏覽器端代碼
// 服務(wù)端有效
class HistoryRoute {
    constructor() {
        this.currentPath = ""
    }

    renderView(component) {
        const route = {
            pushStateOne: "route pushState one",
            pushStateTwo: "route pushState two",
            pushStateThree: "route pushState three",
            replaceState: "route replaceState",
            go: "route go",
            forward: "route forward",
            back: "route back",
            notFind: "not find",
        }
        document.getElementById("historyContent").innerHTML = route[component]
    }

    // 這里所有涉及的跳轉(zhuǎn)都用js方式,不采用a標(biāo)簽(采用a標(biāo)簽請(qǐng)?jiān)O(shè)置攔截)
    skip(path) {
        const commandObj = {
            pushStateOne: () => {
                history.pushState({ path }, path,path)
                this.renderView(path)
            },
            pushStateTwo: () => {
                history.pushState({ path }, path, path)
                this.renderView(path)
            },
            pushStateThree: () => {
                history.pushState({ path }, path, path)
                this.renderView(path)
            },
            replaceState: () => {
                // 是用來修改當(dāng)前的history實(shí)體而不是創(chuàng)建一個(gè)新的,比如連轉(zhuǎn)順序?yàn)?,2,3,1執(zhí)行replaceState(2),再執(zhí)行back(),返回1,而不是3
                history.replaceState({ path }, path, path)
                this.renderView(path)
            },
            go: () => {
                history.go(2)
                this.renderView("go")
            },
            forward: () => {
                history.forward()
                this.renderView("forward")
            },
            back: () => {
                history.back()
            },

        }

        this.currentPath = path;
        commandObj[path]()
    }

    init() {
        window.addEventListener("DOMContentLoaded", () => {
            // 針對(duì)F5刷新問題:
            // 1.可以使用?后面跟參數(shù)形式
            // 2.統(tǒng)一入口利用忽略地址方式(后端配置 /page/:path 忽略page后跟的所有地址,通過前端去請(qǐng)求page后的對(duì)應(yīng)路由數(shù)據(jù),如下)

            const path = location.href.split("/page/") 
            this.skip(path[1])
        })

        // 調(diào)用history.pushState()或history.replaceState()不會(huì)觸發(fā)popstate。
        // 只有在用戶點(diǎn)擊前進(jìn)回退按鈕,(或history.back(),forward,go)
        window.addEventListener("popstate", (event) => {
            console.log("popstate", this.currentPath, event.state);
            const { state } = event
            if (state && state.path) {
                this.renderView(state.path)
            } else {
                this.renderView("404")
            }
        })
    }
}

const historyRoute = new HistoryRoute()

historyRoute.init();
服務(wù)器端
// 結(jié)合前端,可以用以下方式處理
router.get("/page/:path", (ctx, next) => {
    ctx.response.type = "html";
    // 此處的singlePageRoute.html為單頁面html容器,即放置本文中的所有代碼文件
    ctx.response.body = fs.createReadStream("./dist/public/files/singlePageRoute.html");
    return next();
})
歡迎交流 Github

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/99680.html

相關(guān)文章

  • 自己動(dòng)手實(shí)現(xiàn)一個(gè)前端路由

    摘要:?jiǎn)雾撁鎽?yīng)用利用了動(dòng)態(tài)變換網(wǎng)頁內(nèi)容避免了頁面重載路由則提供了瀏覽器地址變化網(wǎng)頁內(nèi)容也跟隨變化兩者結(jié)合起來則為我們提供了體驗(yàn)良好的單頁面應(yīng)用前端路由實(shí)現(xiàn)方式路由需要實(shí)現(xiàn)三個(gè)功能瀏覽器地址變化切換頁面點(diǎn)擊瀏覽器后退前進(jìn)按鈕,網(wǎng)頁內(nèi)容跟隨變化刷新瀏 單頁面應(yīng)用利用了JavaScript動(dòng)態(tài)變換網(wǎng)頁內(nèi)容,避免了頁面重載;路由則提供了瀏覽器地址變化,網(wǎng)頁內(nèi)容也跟隨變化,兩者結(jié)合起來則為我們提供了體...

    psychola 評(píng)論0 收藏0
  • vue-router實(shí)現(xiàn)原理

    摘要:我們知道是的核心插件,而當(dāng)前項(xiàng)目一般都是單頁面應(yīng)用,也就是說是應(yīng)用在單頁面應(yīng)用中的。原理是傳統(tǒng)的頁面應(yīng)用,是用一些超鏈接來實(shí)現(xiàn)頁面切換和跳轉(zhuǎn)的其實(shí)剛才單頁面應(yīng)用跳轉(zhuǎn)原理即實(shí)現(xiàn)原理實(shí)現(xiàn)原理原理核心就是更新視圖但不重新請(qǐng)求頁面。 近期面試,遇到關(guān)于vue-router實(shí)現(xiàn)原理的問題,在查閱了相關(guān)資料后,根據(jù)自己理解,來記錄下。我們知道vue-router是vue的核心插件,而當(dāng)前vue項(xiàng)目...

    vibiu 評(píng)論0 收藏0
  • 徹底理清前端頁面應(yīng)用(SPA)的實(shí)現(xiàn)原理 【精讀源碼】

    showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起,出現(xiàn)了Vue-router,react-router-dom等前端路由管理庫,利用他們構(gòu)建出來的單頁面應(yīng)用,也是越來越接近原生的體驗(yàn),再也不是以前的點(diǎn)擊標(biāo)簽跳轉(zhuǎn)頁面,刷新整個(gè)頁面了,那么他們的原理是什么呢? 優(yōu)質(zhì)gitHub開源練手項(xiàng)目: ...

    xiaodao 評(píng)論0 收藏0
  • 徹底理清前端頁面應(yīng)用(SPA)的實(shí)現(xiàn)原理 【精讀源碼】

    showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起,出現(xiàn)了Vue-router,react-router-dom等前端路由管理庫,利用他們構(gòu)建出來的單頁面應(yīng)用,也是越來越接近原生的體驗(yàn),再也不是以前的點(diǎn)擊標(biāo)簽跳轉(zhuǎn)頁面,刷新整個(gè)頁面了,那么他們的原理是什么呢? 優(yōu)質(zhì)gitHub開源練手項(xiàng)目: ...

    崔曉明 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<