自己做了一個vue前端項目
因為工作中沒有h5項目床佳，慢慢的離h5越來越遠(yuǎn)怕品，所以狠下心來做一個h5項目峡钓，就仿照簡書h5做了一個單頁面應(yīng)用。
整體的項目搭建還是用的之前的webpack+vue2的代碼夭委。
文章在這：http://www.reibang.com/p/468a69ac2fc4
然后一步一步的把項目搭建起來幅狮，首先需要把網(wǎng)站的路由系統(tǒng)做出來。
看一下文件目錄：
第一步：引入路由
import routes from './router'
// 這是router.js
export default {
'/': 'Home',
'/login': 'Login',
'/detail/:id':'Detail'
}
const app = new Vue({
el:"#app",
data:{
currentRoute: window.location.pathname,
topshow:false ,
isLogin:false
},
computed:{
ViewComponent () {
const matchingView = routes[this.currentRoute]
return matchingView
? require('./views/' + matchingView + '.vue')
: require('./views/404.vue')
}
},
render (h) {
return h(this.ViewComponent)
},
methods:{
com_Ajax(obj,success,error){
this.$ajax(obj).then(function(data){
success(data);
},function(data){
error(data);
})
}
}
})
可以看見路由是通過監(jiān)控 this.currentRoute 屬性進(jìn)行相應(yīng)的頁面渲染 這里個問題株灸，用戶通過路由跳轉(zhuǎn)頁面后直接刷新就會404崇摄，其實個問題需要在項目的服務(wù)端配置一下，這里就不多進(jìn)行解釋慌烧。
因為這個路由是基于 HTML5 history API 所以還需要將相關(guān)知識補上逐抑，看網(wǎng)上也有相關(guān)介紹如：https://segmentfault.com/a/1190000002447556
第二步：路由的組件
import VLink from '../components/VLink.vue'
<template>
<a
v-bind:href="href"
v-on:click="go"
>
<slot></slot>
</a>
</template>
<script>
import router from '../router'
export default {
props: {
href: {
type:String,
required: true
}
},
methods: {
go (event) {
event.preventDefault()
this.$root.currentRoute = this.href
window.history.pushState(
null,
router[this.href],
this.href
)
}
}
}
</script>
<style scoped>
.active {
color: cornflowerblue;
}
</style>
用的時候直接：
<v-link href="/login" class="colorMove">
Login
</v-link>
其實看組件的最終改變的是 this.$root.currentRoute = this.href 所以觸發(fā)前面的實時監(jiān)控，進(jìn)行頁面的渲染屹蚊。
這里用到了 window.history.pushState
history.pushState()
它的完全體是 history.pushState(stateObject, title, url)厕氨，包括三個參數(shù)。
第1個參數(shù)是狀態(tài)對象汹粤，它可以理解為一個拿來存儲自定義數(shù)據(jù)的元素命斧。它和同時作為參數(shù)的url會關(guān)聯(lián)在一起。
第2個參數(shù)是標(biāo)題嘱兼，是一個字符串国葬，目前各類瀏覽器都會忽略它（以后才有可能啟用，用作頁面標(biāo)題）芹壕，所以設(shè)置成什么都沒關(guān)系胃惜。目前建議設(shè)置為空字符串。
第3個參數(shù)是URL地址哪雕，一般會是簡單的?page=2這樣的參數(shù)風(fēng)格的相對路徑，它會自動以當(dāng)前URL為基準(zhǔn)鲫趁。需要注意的是斯嚎，本參數(shù)URL需要和當(dāng)前頁面URL同源，否則會拋出錯誤。
調(diào)用pushState()方法將新生成一條歷史記錄堡僻，方便用瀏覽器的“后退”和“前進(jìn)”來導(dǎo)航（“后退”可是相當(dāng)常用的按鈕）糠惫。另外，從URL的同源策略可以看出钉疫，HTML5 history API的出發(fā)點是很明確的硼讽，就是讓無跳轉(zhuǎn)的單站點也可以將它的各個狀態(tài)保存為瀏覽器的多條歷史記錄。當(dāng)通過歷史記錄重新加載站點時牲阁，站點可以直接加載到對應(yīng)的狀態(tài)固阁。
到這為止關(guān)于路由的相關(guān)介紹就沒了。
我也是結(jié)合vue官網(wǎng)的路由案例進(jìn)行學(xué)習(xí)的
就是這個：https://github.com/chrisvfritz/vue-2.0-simple-routing-example
? 著作權(quán)歸作者所有
文／奔跑的攻城獅（簡書作者）
原文鏈接：http://www.reibang.com/p/ce23c878b677
著作權(quán)歸作者所有城菊，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)备燃，并標(biāo)注“簡書作者”。
