Vue路由前后端設(shè)計的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹Vue路由前后端設(shè)計的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(創(chuàng)新互聯(lián)).為客戶提供專業(yè)的服務(wù)器托管雅安,四川各地服務(wù)器托管,服務(wù)器托管雅安、多線服務(wù)器托管.托管咨詢專線：18980820575

一、官網(wǎng)demo

這里不得不吐槽一下官網(wǎng)，寫的不清不楚的，在哪里使用都沒有說清楚，幾行代碼一句話就輕飄飄的交代完事了，剩下的事情還得自己研究，比如 HTML5 History API 是怎么回事。這里又涉及了一個問題，想要用好vue，必須的基礎(chǔ)是要先掌握的，因為vue的官網(wǎng)教程里面不會管這些基礎(chǔ)知識的。

先看官網(wǎng)的代碼：

const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }

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) }
})

很簡單吧就這么幾句，浪費了我好多時間才研究明白。恩，好吧還有一個地方每太明白。

首先定義了三個“常量”，就是不能改的那種變量，代表三個頁面，或者說是三個模板。分別是404、首頁和關(guān)于我們。

然后定義了一個路由規(guī)則，其實就是一個json，也可以理解為是一個實體類。Key代表url的地址后面的路徑和文件名，后面的是我們的真實頁面，也就是第一行定義的三個常量。

然后就是常見的vue的實例了，首先需要一個div與之對應(yīng)，然后是data返回url上面的地址，然后ViewComponent 是根據(jù)url地址返回對應(yīng)的模板（頁面）。

最后是render 。大概是實現(xiàn)綁定div的功能吧。

根據(jù)這個意思補充了一個頁面

 <body>
   <span onclick="myURL('/')">首頁</span>
   <span onclick="myURL('/about')">關(guān)于</span>
   <div id="app"></div>
 </body>

然后呢，運行網(wǎng)頁顯示 Page not found 404 ，看來路由還是起作用了。那么home和about要怎么出來呢？

二、HTML5 History API

首先要補充一下 HTML5 History API的相關(guān)知識，如果已經(jīng)掌握了那么請略過。

HTML5 History API提供了一種功能，能讓開發(fā)人員在不刷新整個頁面的情況下修改站點的URL。這個功能很有用，例如通過一段JavaScript代碼局部加載頁面的內(nèi)容，你希望通過改變當前頁面的URL來反應(yīng)出頁面內(nèi)容的變化，這時該功能可以派上用場。

我們可以用 history.pushState(null, null, ‘a(chǎn)bout'); 來改變url地址，這種方式只是單純的修改地址里的url，而不會向服務(wù)器提交，這樣頁面就不會被刷新，我們才有機會執(zhí)行vue的代碼。

然后呢，頁面當然是不會有啥變化的，因為vue是數(shù)據(jù)驅(qū)動，我們的數(shù)據(jù)改變了嗎？并沒有，我們只是改變了一下url。這個vue似乎沒有對rul做監(jiān)聽，或者是我還不知道怎么讓vue去監(jiān)聽url的變化，總之我們先自己改變數(shù)據(jù)，然后再去研究vue有沒有辦法去監(jiān)聽url。

我們在寫一行修改數(shù)據(jù)的代碼route.currentRoute = window.location.pathname就可以了。

最后加一個簡單的導(dǎo)航，執(zhí)行上面兩行js代碼。

<span onclick="myURL('/')">首頁</span>
<span onclick="myURL('/about')">關(guān)于</span>

function myURL(name) {
    history.pushState(null, null, name);
    route.currentRoute = window.location.pathname;
}

三、按了F5怎么辦？

按F5會刷新頁面，如果這時候url地址欄是 “/about” ，那么就會向服務(wù)器提交這個網(wǎng)址，很顯然會出現(xiàn)服務(wù)器的404頁面。因為服務(wù)器網(wǎng)站里面并沒有這個地址。那么怎么辦呢？目前想到的辦法就是修改網(wǎng)站的404頁面。比如IIS，可以到IIS里改一下，把我們做的這個router.html設(shè)置為404的響應(yīng)頁面，這樣按F5就沒事了。

當然這種方式并不是太好的選擇，只是一種臨時的方法。應(yīng)該會有更好的方法吧。沒事不急慢慢學(xué)。

這種方式還支持直接在瀏覽器的地址欄里面輸入 http://127.0.0.1:8000/about 也是可以正常運行的。只需要注意一下vue.js的引用地址確保能夠正確加載js文件即可。

那么如果地址欄里輸入 http://127.0.0.1:8000/aboutss 呢？當然是vue設(shè)計的404模塊了。

不過還有一個問題，那個 const About 要怎么改？這種簡單的模板沒辦法做復(fù)雜應(yīng)用的呀。也許只有在工程化的項目里，路由才能發(fā)揮大的作用吧。

以上是“Vue路由前后端設(shè)計的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標題名稱：Vue路由前后端設(shè)計的示例分析-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://bm7419.com/article0/gigoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、網(wǎng)站排名、服務(wù)器托管、網(wǎng)站設(shè)計公司、外貿(mào)網(wǎng)站建設(shè)、企業(yè)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容