Vue的前端路由

　　　　　　　　　　　　vue-router-- 根據不一樣的地址找到不一樣的頁面 

                                     (單頁面應用：無需頻繁的從後臺刷新頁面)

 

1,安裝路由-->導入-->註冊--->實例化-->Vue實例中聲明此實例

2，路由 map（實例的vue-router配置） router-view （規定路由中的組件在哪顯示）顯示  router-link 跳轉

  

    :to=""   動態綁定

 根目錄下的apple

  基於當前路徑的apple

   tag轉換a爲li標籤 

 

 當前路由會添加默認類名：router-link-active

 

3，路由參數（： 添加完參數後，必須完整的輸入地址）

      

4，嵌套路由（chiidren的組件會渲染到父級（Apple）的vue文件的 router-view中）

 

5，命名的路由

  

  

6，編程似的導航：

  router.push({path: 'apple'})

router.beforEach()每次跳轉前可寫方法進行操做，比方說異步檢查一下用戶信息狀態，符合條件再執行router.push({path: 'apple'})

7，路由重定向       

8，路由跳轉動畫 

 

 

                       Vuex 狀態管理工具-數據中心維護一些數據通知（某些組件被改變狀態後其餘頁面也會實時更新  登錄  購物車）

   

 

安裝vuex

1，npm install vuex --save

2，main.js引入 並註冊vuex  

import Vuex from 'vuex'

Vue.use(Vuex);

 使用store

第一步，實例化store

let store=new Vuex.store（{
state://存放數據{
totalPrice:0
},
mutations:{ //動做
 increment(state,price){
state.totalPrice+=price
},
decrement(state,price){ 
state.totalPrice-=price
}},
actions:{ //只能調用mutations不能調用state 
 increase(context,price){ //context便是當前的store對象
 context.commit('increment',price)
 }

}

}）; //實例化數據中心
 
  （若是有actions則這樣調用）

actions 和 mutations 的區別是，actions能夠進行異步的請求，mutations進行同步的操做

2，第二步，Vue實例中聲明

3，調用
  


******** 不一樣塊級的數據放入到不一樣的mudule中的js中 （http://www.jb51.net/article/124618.htm）  
 http://blog.csdn.net/github_26672553/article/details/53389988

 

  全部的mutations中的函數中都傳入了state參數

放在全局的實例化對象裏 commit 調用 mutation

組件中調用actions this.$store.dispatch('increase',this.price) 

報錯：Component template requires a root element, rather than just text.（每一個組件至少有一個包裹的dom元素）

computed屬性      https://www.cnblogs.com/freefish12/p/6046828.html

這是main.js代碼：
　　import Vue from 'vue'
　　import VueRouter from 'vue-router'
　　import App from './App.vue'
　　import goods from './components/goods.vue'
　　import ratings from './components/ratings.vue'
　　import seller from './components/seller.vue'
　　Vue.use(VueRouter)
　　Vue.config.productionTip = false
　　/ eslint-disable no-new /
　　var routes = [
　　{path: '/goods', components: goods},
　　{path: '/ratings', components: ratings},
　　{path: '/seller', components: seller}
　　]
　　var router = new VueRouter({
　　routes
　　})
　　new Vue({
　　el: '#app',
　　router,
　　template: '<App/>',
　　components: { App }
　　})