vue.js、vue-router建立單頁運用實作程式碼

本文主要跟大家分享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如何操作單一頁多路由區域的實例分析

H5單一頁面手勢滑幕切換原理

webpack、vue、node實作單頁碼分享

#

以上是vue.js、vue-router建立單頁運用實作程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！