歷史管理與router路由

阿新 • • 發佈：2018-12-16

1.router路由管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
</head>
<body>
<script>
    //歷史管理
    //路由  路徑->路由 獲取路由  對路由進行分發
    //頁面路由會進行跳轉window.location.href = 'http://hao123.com'
    /*
    hash路由，不會跳轉，能夠實現無重新整理的頁面的功能
    利用的框架打包上線，都會用hash
    如果頁面，也就意味者所有的資料要重新進行渲染，
    如果不用hash路由，那麼路由要在服務端進行渲染(如果沒有服務端渲染，那麼重新整理頁面，就會出現404)
    前端的框架都遵循前後端分離的思想

     */ 

    window.location.hash = '#home';
    //H5
    window.history.pushState('name','無效的標題','/path'); //推進一個歷史狀態
    //替換一個歷史狀態
    window.history.replaceState('name','無效的標題','/path');
</script>
</body>
</html>

2.歷史管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset= 
"UTF-8">
    <title>歷史管理</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#ddd;
            -webkit-user-select:none;
            user-select:none;
        }
        li{
            list-style:none;
        } 

        #box{
            width: 80%;
            height: 500px;
            border:1px solid white;
            margin: 150px auto 0;
            display:flex;
            justify-content: space-around;
            align-items:center;
            text-align:center
        }
        ul{
            width: 150px;
        }
        li{
            line-height: 35px;
            border:1px solid #000;
            margin-bottom: 15px;
        }
        #con{
            width: calc( 80% - 200px );
            height: 300px;
            border:1px solid white;
        }

    </style>
</head>
<body>
<div id='box'>
    <ul id='list'></ul>
    <div id='con'></div>
</div>
<script src="data.js"></script>
<script>
    let con = document.getElementById('con');
    let str = '';
    for(let key in data){
        str += '<li data-name="'+key+'">'+key+'</li>'
    }
    list.innerHTML = str;
    let aLi = document.querySelectorAll('li');
    aLi.forEach(function (item,index) {
        item.onclick = function () {
            console.log(this.dataset['name']); //列印key
            console.log(data[this.dataset['name']]); //列印value
            console.log(window.history); //歷史管理

            //點選li新增歷史記錄，有歷史記錄就可以，點選前進後退按鈕
            let name = decodeURI(this.dataset['name']); //進行解碼，防止中文報錯
            if(window.history&&window.history.pushState){
            //追加雜湊路由管理
                window.history.pushState(name,'追夢','#path='+name);
            }
        }

    });
    //點選前進 後退按鈕
    window.onpopstate = function (e) {
        console.log(e.state); //列印key值
        if(e.state){

            con.innerHTML = data[e.state];
        }

    }
    window.onhashchange = function () {
        console.log(window.location.hash);

    }
    // 在PC ‘移動端	瀏覽器 都有 前進後退的按鈕
    // 但是 app 裡沒有的
    // app 都是div模擬的
    // 點選div 去實現返回上一個頁面 或 去到下一頁面 自己寫
    // window.history.go( -1 ) 這是後退按鈕
    // window.history.go( 1 ) 這是前進按鈕
    // window.history.go( 0 ) 這是重新整理頁面
    // window.history.back() 返回上一個頁面
    // window.history.forward() 去到下一個頁面

</script>
</body>
</html>

歷史管理與router路由

1.router路由管理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>router</title> &l

「Vue」起步 - vue-router路由與頁面間導航

port details cal 重定向替換特色插件實戰顯式 vue-router 我們知道路由定義了一系列訪問的地址規則，路由引擎根據這些規則匹配找到對應的處理頁面，然後將請求轉發給頁進行處理。可以說所有的後端開發都是這樣做的，而前端路由是不存在"請求"一說的

Centos網絡管理(四)-路由轉發與靜態路由

centos網絡管理(四) 路由轉發與靜態路由 centos路由轉發與靜態路由實驗環境：VMware Workstation Pro 14（試用版）系統平臺：CentOS release 6.9 (Final) 內核 2.6.32-696.el6.x86_64CentOS L

vue-router路由管理器

code ins font clas ria style spa span route 安裝vue-router npm install vue-router 在main.js中引入 import VueRouter from ‘vue-router‘ Vue.

Vue父子vue-router路由傳遞資料與父子元件傳遞資料之分析

父子路由傳遞資料分析如下實際上等同於父子元件之間，資料的傳遞；父傳子 ---------> 父繫結屬性，子props接受屬性值子傳父 ---------> 觸發自定義事件，子觸發$emit,父接收父元件觸發子事件 ------->

React第三方元件1(路由管理之Router的使用⑤按需載入-下)

微信公眾號首發本教程總共6篇,每日更新一篇,請關注我們!你可以進入歷史訊息檢視以往文章,也敬請期待我們的新文章! 1、React第三方元件1(路由管理之Router的使用①簡單使用)---2018.01.22 2、React第三方元件1(路由管理之Ro

Vue Router路由管理器介紹

html 博客 .cn 模塊化核心圖表 https pre title 參考博客：https://www.cnblogs.com/avon/p/5943008.html 版本說明對於 TypeScript 用戶來說，[email protected]+ 依賴 v

koa-router 路由引數與前端路由的結合

koa-router 定製路由時支援通過冒號形式在 url 中指定引數，該引數會掛載到 context 上然後可通過 context.params.paramName 方便地獲取。考察下面的示例： var Koa = require("koa"); va

#12 程序包管理與rpm命令的使用

程序包管理與rpm命令的使用Linux的程序包管理：程序：指令+數據程序：算法+數據結構應用程序的存在形式：1.源代碼：包含了整個應用程序的編程語言的所有代碼的文本文件；2.二進制：將源代碼經過一系列的轉換操作之後得到的可以直接執行的文件使用源代碼安裝應用程序：預處理(預處理器) --> 編譯(編譯器)

遊戲UI框架設計(五): 配置管理與應用

oid per b- 測試中心序列化對象 ner stun sage 遊戲UI框架設計(五) --配置管理與應用在開發企業級遊戲/VR/AR產品時候，我們總是希望可以總結出一些通用的技術體系，框架結構等，為簡化我們的開發起到“四兩撥千金”的作用。所謂“配

遊戲UI框架設計(五)：配置管理與應用

unity界面框架 unityui框架 ui框架配置 unity配置管理遊戲UI框架設計(五)--配置管理與應用在開發企業級遊戲/VR/AR產品時候，我們總是希望可以總結出一些通用的技術體系，框架結構等，為簡化我們的開發起到“四兩撥千金”的作用。所謂“配置管理”是指一個遊戲項目（軟件項

AngularJS1.6版本中ui-router路由中/#!/的解決方法 - zhuan

ret soft https variable name class over func efi 本地編譯出的文件可以正常運行，但是服務器編譯後到了測試那裏路由上就莫名的出現了/#!/，這導致了很多問題。後來查了下是服務器編譯器把AngularJS升級到了1.6版本，而我

《網絡管理》IP地址管理與子網劃分

響應時間例如 bcf 拓撲圖設置密碼屬性正在段地址數量 IP地址管理——ipmaster ipmaster是一款對IP地址進行管理的軟件，使用該軟件可以提高網絡管理員的工作效率。在大型網絡中，使用該軟件可以有序且高效地實現大中小型企業網IP地址的分配和管理。該

Redis 內存管理與事件處理

erp 監聽端口 nal 回調 files poll 其中監聽服務 repl 1 Redis內存管理 Redis內存管理相關文件為zmalloc.c/zmalloc.h，其只是對C中內存管理函數做了簡單的封裝，屏蔽了底層平臺的差異，並增加了內存使用情況統計的功能。 v

小團隊管理與大團隊管理

不但工業革命原則區別團隊管理信息兩種模式超過內部我們公司和大部分傳統軟件公司一樣，隨著業務的發展和新領域的開拓，公司的管理風格越來越像華為，這是不是最佳的演進路線，我覺得值得探討，以下是我的思考，希望跟領導討論。一個問題前段時間跟一個創業的朋

程序包管理與程序編譯安裝（第九章）

程序包管理1. 程序包管理工具1.1 dpkg包管理工具 dpkg為基於debian發行版中的程序包管理工具，例如Ubuntu、linxu mint。 aptitude：軟件包管理系統，直接輸入此命令可進入包管理的視圖 dpkg -L Package_Name：列出指定軟件包所包含的全部文件 dpkg -

Cookie & Session【會話管理與控制】

有效期 unset font 重置也有姓名本地 tro 讀取用現實生活類比Cookie 和 Session ：兩個關於開會的故事：在幾十年前人們開會的時候，都需要帶上一個參會證。這個參會證上有這個人的職務、姓名、單位、照片等信息。在開會的時候，會議安保人員

.NET Framework 企業安全策略管理與部署

策略管理 highlight light 步驟工具級別 soft true arp 執行下列步驟，以便.NET Framework 支持所有程序運行 1.打開“控制面板”。 2.打開“管理工具”文件夾。 3.雙擊“Microsoft .NET Framew

<keep-alive>控制Vue Router路由

view homepage 信息 app keepal div path router class 只給部分組件加上<keep-alive>啊，在app.vue裏這樣  <keep-alive&

【Linux】 Linux權限管理與特殊權限

設置獲取默認值 ima ati service 選項密碼 sbit Linux權限管理　　權限管理這方面，非常清楚地記得剛開始實習那會兒是仔細研究過的，不知道為什麽沒有筆記留痕。。除了一些基本的知識點早就忘光了，無奈只好從頭開始學習一遍。。 ■　　基本權限

歷史管理與router路由

相關推薦