收藏
天蓬老師批改狀態(tài)：合格
老師批語：挺棒的, 原生路由理解了, 那么框架還難嗎?
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>路由的原理</title><script src="lib/vue.js"></script></head><body><a href="#1">新聞1</a><a href="#2">新聞2</a><a href="#3">新聞3</a><!-- 根據(jù)路由/錨點(diǎn)不同 --><!-- <h3 id="story1" style="margin-top: 1200px">故事的內(nèi)容是這樣的......</h3><h3 id="story2" style="margin-top: 1900px">故事的內(nèi)容是這樣的......</h3> --><div id="app"></div><!-- 404 --><div id="page404" style="display: none">這個(gè)故事說完了！</div></body><script>//原生的SPA(單頁面應(yīng)用)的路由實(shí)現(xiàn)方式//基于錨點(diǎn)實(shí)現(xiàn)//（一）路由的原理//實(shí)現(xiàn)不刷新頁面，就可以動(dòng)態(tài)實(shí)現(xiàn)數(shù)據(jù)的加載，達(dá)到SPA的效果/* console.log(window.location.hash);獲取url中的錨點(diǎn)console.log(document.querySelector("a:first-of-type").href.substr(-2));console.log(document.querySelector("a:nth-of-type(2)").href.substr(-2));console.log(document.querySelector("a:last-of-type").href.substr(-2)); *///window.addEventListener("hashchange", () => console.log("hash變化了"));//（二）路由的實(shí)現(xiàn)//1.創(chuàng)建dom節(jié)點(diǎn)，并注冊(cè)到路由表中const app = document.querySelector("#app");const div1 = document.createElement("div");div1.innerHTML = "1.習(xí)近平的2020·八月：謀劃“新發(fā)展階段”";const div2 = document.createElement("div");div2.innerHTML = "2.中國關(guān)于聯(lián)合國成立75周年立場(chǎng)文件";const div3 = document.createElement("div");div3.innerHTML = "3.習(xí)近平總書記關(guān)切事丨敬禮！最溫暖的陪伴";//2.注冊(cè)到路由表中//路由表const routeTable = {1: div1,2: div2,3: div3,};//生成路由function route(container) {//1.:獲取到路由let num = window.location.hash.substr(1);console.log(num);//2.默認(rèn)路由num = num || 1;console.log(num);//3.根據(jù)路由表獲取對(duì)應(yīng)的內(nèi)容let content = routeTable[num];//4.如果路由表不存在指定的內(nèi)容，獲取到404頁面if (!content) content = document.querySelector("#page404");content.style.display = "block";//5.先將容器清空container.innerHTML = null;//6.將路由對(duì)應(yīng)的頁面渲染到指定的容器中container.appendChild(content);}//路由的初始化/顯示默認(rèn)頁面route(app);//監(jiān)聽路由的變化/監(jiān)聽的錨點(diǎn)的變化window.addEventListener("hashchange", () => route(app));</script></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vue路由的原理</title><script src="lib/vue.js"></script><!-- 路由包 --><script src="lib/vue-router-dev/dist/vue-router.js"></script></head><body><div id="app"><!-- 1.使用router-link組件來生成導(dǎo)航 --><router-link to="/news1">新聞1</router-link><router-link to="/news2">新聞2</router-link><router-link to="/news3">新聞3</router-link><!-- 2.路由內(nèi)容的渲染 --><router-view></router-view></div></body><script>const news1 = {template: "<p>1.從前有座山.....</p>",};const news2 = {template: "<p>2.龜兔賽跑.....</p>",};const news3 = {template: "<p>3.和氏璧.....</p>",};//注冊(cè)路由const router = new VueRouter({routes: [//是一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象對(duì)應(yīng)一個(gè)路由{ path: "/news1", component: news1 },{ path: "/news2", component: news2 },{ path: "/news3", component: news3 },],});//vue實(shí)例const vm = new Vue({//將路由注冊(cè)到掛載點(diǎn)中//當(dāng)屬性名與變量同名，只需要寫一個(gè)router: router,//router,}).$mount("#app");</script></html>
window.location.hash獲取url中的錨點(diǎn)
hashchange參數(shù)來監(jiān)聽錨點(diǎn)的變化
實(shí)現(xiàn)路由的步驟：
1.創(chuàng)建dom節(jié)點(diǎn)
2.注冊(cè)到路由表中
3.生成路由(獲取到路由、設(shè)置默認(rèn)路由、根據(jù)路由表獲取對(duì)應(yīng)的內(nèi)容、清空容器、將路由對(duì)應(yīng)的頁面渲染到指定的容器中)
4.路由初始化/顯示默認(rèn)頁面
5.監(jiān)聽路由的變化/監(jiān)聽的錨點(diǎn)的變化
下載完后解壓即可，主要用的是vue-router-dev/dist/vue-router.js
使用router-link組件來生成導(dǎo)航
router-view標(biāo)簽來渲染路由
注冊(cè)路由：
const router = new VueRouter({routes: [//是一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象對(duì)應(yīng)一個(gè)路由],});
最后將路由注冊(cè)到掛載點(diǎn)中
當(dāng)屬性名與變量同名，只需要寫一個(gè)
$mount()：手動(dòng)掛載
git:免費(fèi)，開源的分布式版本控制系統(tǒng)
git 中的一些術(shù)語:
版本庫
工作區(qū)
暫存區(qū)
git 流程
cd 目錄 切換到需要使用git進(jìn)行版本控制的項(xiàng)目目錄中
配置用戶名和郵箱
git config --global user.name '用戶名'git config --global user.email '郵箱'
git init
git add . # 一次性全部提交完畢 add命令可將該文件添加到暫存區(qū)git status # 查看狀態(tài)
git commit -m '2020-09-10 22:02' //'注釋'
git remote add origin https://gitee.com/bnkt/git-edu.git
git remote -v
git push origin master //指定遠(yuǎn)程倉庫名和分支名git push -u origin master //將本地的master分支推送到origin主機(jī)，同時(shí)指定origin為默認(rèn)主機(jī)git push -f origin master //本地強(qiáng)制上傳到遠(yuǎn)程，把遠(yuǎn)程的覆蓋
git pull https://gitee.com/jia-xiang/git-edu.gitgit pull origin master
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)