本文主要跟大家分享vue.js、vue-router建立單頁運用實作程式碼，希望能幫助大家。
vue.js+vue-router建立單頁運用
一、安裝
npm install vue-router
二、router的運用
1. 在子元件中監聽路由變化
export default {
name: 'app',
computed:mapGetters(['loading','shownav']),
//监听路由的变化
watch:{
$route(to,from){
console.log(to);
console.log(from);
}
},
components:{
}
}路由資訊物件：$route（唯讀不可變的，可透過watch偵測其變更）
表示目前啟動的路由的狀態訊息，包含了目前url解析所得到的資訊以及url符合的路由記錄
路由資訊物件出現在多個地方：
元件內， this.$route是路由資訊物件
在$route觀察者(watch)回呼內
route.match(location)的返回值
路由資訊物件的屬性
$route.path：string。目前路由的絕對路徑
$route.params：Object。
$route.query：object。 Url的查詢參數
$route.fullPath：完整路徑
$route.matched：路由記錄
#$route.name：目前路由的名稱
三、vuex
1. 安裝vuex
//安装 npm install vuex --save 在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
2. 建立一個store
另外建立一個目錄進行Vuex狀態的儲存
相關推薦：
#以上是vue.js、vue-router建立單頁運用實作程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
