Vue路由前后端設(shè)計(jì)的示例分析-創(chuàng)新互聯(lián)
這篇文章主要介紹Vue路由前后端設(shè)計(jì)的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(創(chuàng)新互聯(lián)).為客戶提供專業(yè)的
服務(wù)器托管雅安,四川各地服務(wù)器托管,
服務(wù)器托管雅安、多線服務(wù)器托管.托管咨詢專線：18980820575
一、 官網(wǎng)demo
這里不得不吐槽一下官網(wǎng)，寫的不清不楚的，在哪里使用都沒(méi)有說(shuō)清楚，幾行代碼一句話就輕飄飄的交代完事了，剩下的事情還得自己研究，比如 HTML5 History API 是怎么回事。這里又涉及了一個(gè)問(wèn)題，想要用好vue，必須的基礎(chǔ)是要先掌握的，因?yàn)関ue的官網(wǎng)教程里面不會(huì)管這些基礎(chǔ)知識(shí)的。
先看官網(wǎng)的代碼：
const NotFound = { template: 'Page not found
' }
const Home = { template: 'home page
' }
const About = { template: 'about page
' }
const routes = {
'/': Home,
'/about': About
}
new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname
},
computed: {
ViewComponent () {
return routes[this.currentRoute] || NotFound
}
},
render (h) { return h(this.ViewComponent) }
})很簡(jiǎn)單吧就這么幾句，浪費(fèi)了我好多時(shí)間才研究明白。恩，好吧還有一個(gè)地方每太明白。
首先定義了三個(gè)“常量”，就是不能改的那種變量，代表三個(gè)頁(yè)面，或者說(shuō)是三個(gè)模板。分別是404、首頁(yè)和關(guān)于我們。
然后定義了一個(gè)路由規(guī)則，其實(shí)就是一個(gè)json，也可以理解為是一個(gè)實(shí)體類。Key代表url的地址后面的路徑和文件名，后面的是我們的真實(shí)頁(yè)面，也就是第一行定義的三個(gè)常量。
然后就是常見的vue的實(shí)例了，首先需要一個(gè)div與之對(duì)應(yīng)，然后是data返回url上面的地址，然后ViewComponent 是根據(jù)url地址返回對(duì)應(yīng)的模板（頁(yè)面）。
最后是render 。大概是實(shí)現(xiàn)綁定div的功能吧。
根據(jù)這個(gè)意思補(bǔ)充了一個(gè)頁(yè)面
首頁(yè)
關(guān)于
然后呢，運(yùn)行網(wǎng)頁(yè)顯示 Page not found 404 ，看來(lái)路由還是起作用了。那么home和about要怎么出來(lái)呢？
二、HTML5 History API
首先要補(bǔ)充一下 HTML5 History API的相關(guān)知識(shí)，如果已經(jīng)掌握了那么請(qǐng)略過(guò)。
HTML5 History API提供了一種功能，能讓開發(fā)人員在不刷新整個(gè)頁(yè)面的情況下修改站點(diǎn)的URL。這個(gè)功能很有用，例如通過(guò)一段JavaScript代碼局部加載頁(yè)面的內(nèi)容，你希望通過(guò)改變當(dāng)前頁(yè)面的URL來(lái)反應(yīng)出頁(yè)面內(nèi)容的變化，這時(shí)該功能可以派上用場(chǎng)。
我們可以用 history.pushState(null, null, ‘a(chǎn)bout'); 來(lái)改變url地址，這種方式只是單純的修改地址里的url，而不會(huì)向服務(wù)器提交，這樣頁(yè)面就不會(huì)被刷新，我們才有機(jī)會(huì)執(zhí)行vue的代碼。
然后呢，頁(yè)面當(dāng)然是不會(huì)有啥變化的，因?yàn)関ue是數(shù)據(jù)驅(qū)動(dòng)，我們的數(shù)據(jù)改變了嗎？并沒(méi)有，我們只是改變了一下url。這個(gè)vue似乎沒(méi)有對(duì)rul做監(jiān)聽，或者是我還不知道怎么讓vue去監(jiān)聽url的變化，總之我們先自己改變數(shù)據(jù)，然后再去研究vue有沒(méi)有辦法去監(jiān)聽url。
我們?cè)趯懸恍行薷臄?shù)據(jù)的代碼route.currentRoute = window.location.pathname就可以了。
最后加一個(gè)簡(jiǎn)單的導(dǎo)航，執(zhí)行上面兩行js代碼。
首頁(yè)
關(guān)于
function myURL(name) {
history.pushState(null, null, name);
route.currentRoute = window.location.pathname;
}
三、按了F5怎么辦？
按F5會(huì)刷新頁(yè)面，如果這時(shí)候url地址欄是 “/about” ，那么就會(huì)向服務(wù)器提交這個(gè)網(wǎng)址，很顯然會(huì)出現(xiàn)服務(wù)器的404頁(yè)面。因?yàn)榉?wù)器網(wǎng)站里面并沒(méi)有這個(gè)地址。那么怎么辦呢？目前想到的辦法就是修改網(wǎng)站的404頁(yè)面。比如IIS，可以到IIS里改一下，把我們做的這個(gè)router.html設(shè)置為404的響應(yīng)頁(yè)面，這樣按F5就沒(méi)事了。
當(dāng)然這種方式并不是太好的選擇，只是一種臨時(shí)的方法。應(yīng)該會(huì)有更好的方法吧。沒(méi)事不急慢慢學(xué)。
這種方式還支持直接在瀏覽器的地址欄里面輸入 http://127.0.0.1:8000/about 也是可以正常運(yùn)行的。只需要注意一下vue.js的引用地址確保能夠正確加載js文件即可。
那么如果地址欄里輸入 http://127.0.0.1:8000/aboutss 呢？當(dāng)然是vue設(shè)計(jì)的404模塊了。
不過(guò)還有一個(gè)問(wèn)題，那個(gè) const About 要怎么改？這種簡(jiǎn)單的模板沒(méi)辦法做復(fù)雜應(yīng)用的呀。也許只有在工程化的項(xiàng)目里，路由才能發(fā)揮大的作用吧。
以上是“Vue路由前后端設(shè)計(jì)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
文章名稱：Vue路由前后端設(shè)計(jì)的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站路徑：
http://weahome.cn/article/gigoo.html
重慶分公司
重慶分公司
