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如何操作單頁面多路由區域的實例分析

H5單頁面手勢滑屏切換原理

webpack、vue、node實現單頁面代碼分享

以上就是vue.js、vue-router創建單頁運用實現代碼的詳細內容，更多請關注php中文網其它相關文章！