vue-router和vuex是官方提供的vue插件，主要解決路由和狀態(tài)管理兩個問題

vue-router筆記

vue-router基本概念

vue-router解決路由與組件的對應關系姻僧。

• 嵌套的路由/視圖表
• 模塊化的规丽、基于組件的路由配置
• 路由參數(shù)、查詢撇贺、通配符
• 基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
• 細粒度的導航控制
• 帶有自動激活的 CSS class 的鏈接
• HTML5 歷史模式或 hash 模式赌莺，在 IE9 中自動降級
• 自定義的滾動條行為

vue-router的基礎使用方法

1.安裝vue-router依賴

npm i -S vue-router

2.使用vue-router插件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3.初始化vue-router對象

const routes = [
{ path: '/a' component: A },
{ path: '/b' component: B },
{ path: '/hello-routes', component:helloroutes  }
]
const router = new Route({
    routes
})

注：這里省略了定義A組和B組的過程，這兩個組件與普通組件無異

4.實例化vue對象松嘶，傳入router參數(shù)

new Vue({
    router,
    render:h =>(App)
})

5.使用router-view和router-link

router-view和router-link是vue-router官方提供的兩個組件艘狭，router-view會替換為路由對應的組件，router-link相當于a標簽，點擊會加載to屬性中路由對應組件

   <div>
      <div>
        <router-link to="/a">a</router-link>
      </div>
      <div>
        <router-link to="/b">b</router-link>
      </div>
      <div>
        <router-link to="/hello-routes">helloroutes</router-link>
      </div>
    </div>
<router-view/><!-- router-view 顯示的是當前路由地址所對應的內(nèi)容 -->

路由嵌套

上面是一個非常簡單的vue-router case巢音，實際項目開發(fā)過程中遵倦，需求往往不會這么簡單，比如我們希望實現(xiàn)/a/aa路由官撼，并且/aa對應的組件嵌套在/a之下梧躺，這時我們需要修改路由的配置文件：

const routes =[{
    path:'/a',
    component:A,
    redirect:'/a/aa',
    children:[
    {
    path:'/a/aa',
    component:AA,
    }]
}]

并修改A組件的內(nèi)容：

<template>
<div>
<div>a</div>
<router-view/>
</div>
</template>

由于A組件是父級路由，所以也需要添加router-view組件傲绣，動態(tài)匹配子路由

重定向

將一個路由重定向到另一個路由燥狰，實際開發(fā)過程中非常實用，修改配置文件即可：

const routes = [{
    path:'/a',
    component:A,
    redirect:'/a/aa',
    children[{
    path:'/a/aa',
    component:AA,
    }]
}]

動態(tài)路由

為了支持restful形式路由以及更復雜的場景時斜筐，我們可以使用動態(tài)路由和定義路由時龙致，在路由前加上冒號即可，我們先添加AA2組件顷链，動態(tài)路由部分通過this.$route.params進行接收：

<template>
  <div>
    aa2
    <div>{{id}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: null,
    };
  },
  created() {
    this.id = this.$route.params.id;
  },
};
</script>

修改路由配置后生效：

const routes = [
  {
    path: "/a",
    component: A,
    redirect: "/a/aa",
    children: [
      {
        path: "/a/aa",
        component: AA,
      },
      {
        path: "/a/:id",
        component: AA2,
      },
    ]
  }
]

動態(tài)路由的優(yōu)先級低于普通路由目代，所以我們訪問/a/aa時會匹配到AA組件，而輸入其它路由時會匹配到AA2組件

路由參數(shù)

參數(shù)傳遞是我們開發(fā)過程中必不可少的步驟嗤练，vue-router支持參數(shù)傳遞榛了，通過this.$route.query進行接收，我們修改AA組件進行測試

<template>
  <div>
    aa
    <div>{{message}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "",
    };
  },
  created() {
    this.message = this.$route.query.message || "";
  },
};
</script>

編程式路由

有很多時候我們需要手動操作路由的跳轉(zhuǎn)煞抬，這時我們需要使用this.$router,以下是一些常用的操作:

1.路由跳轉(zhuǎn)

this.$router.push('/a/aa')

2.帶參數(shù)路由跳轉(zhuǎn)

this.$router.push({
    path:'/a/aa',
    query:{
    message:'321'
    }
})

3.不同history插入記錄

this.$router.replace{'/a/123'}

4.回退

this.$router.go(-1)

vuex筆記

vuex基本概念

vuex解決了狀態(tài)管理問題霜大，通過集中管理狀態(tài)，使得state革答、action和view實現(xiàn)松耦合战坤，從而讓代碼更容易維護。

• state：驅(qū)動應用的數(shù)據(jù)源残拐。
• actions：響應在 view上的用戶輸入導致的狀態(tài)變化途茫。
• view：以聲明方式將 state映射到視圖。
  
  “單向數(shù)據(jù)流”理念示意圖

vuex的基本使用方法

1.安裝vuex依賴

npm i -S vuex

2.使用vuex插件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

3.初始化vuex對象

const store = new Vuex.Store({
    state:{
    data:'我是測試'
    },
    mutations:{
    SET_DATA(state,data){
    state.data=data
    }
    },
    actions:{
    setData({commit},data){
    commit('SET_DATA',data)
    }
    }
})

4.實例化vue對象溪食，傳入store參數(shù)

new Vue({
    render:h =>h(app),
    router,
    stare
})

5.讀取vuex狀態(tài)

<div>{{$store.state.data}}</div>

6.更新vuex狀態(tài)

update(){
    this.$store.dispatch('setData','這是測試二')
}

vuex模塊化

實際項目開發(fā)中囊卜，狀態(tài)眾多，如果全部混在一起错沃，則難以分辨栅组，而且容易互相沖突，為了解決問題枢析，vuex引入模塊化的概念玉掸，解決這個問題，下面我們定義a和b兩個模塊：

const moduleA = {
  state: {
    data: "我是a",
  },
  mutations: {
    SET_DATA(state, data) {
      state.data = data;
    }
  },
  actions: {
    SETdATA({ commit }, data) {
      commit("SET_DATA", data);
    }
  }
};
const moduleB = {
  state: {
    data: "我是b",
  },
  mutations: {
    SET_DATA(state, data) {
      state.data = data;
    }
  },
  actions: {
    setData({ commit }, data) {
      commit("SET_DATA", data);
    }
  }
};

修改store的初始化代碼：

const store = new Vuex.Store({
    modules:{
    a:moduleA,
    b:moduleB
    }
})

修改獲取狀態(tài)的代碼登疗，此時需要加入模塊進行區(qū)分：

<div>{{$store.state.a.data}}</div>
<div>{{$store.state.b.data}}</div>
<button @click="update('a')">按鈕a</button>
<button @click="update('b')">按鈕b</button>

修改update方法：

update(abc){
    this.$store.dispatch('setDate','update ${abc}')
}

vuex命名空間

上述代碼在執(zhí)行過程中排截，獲取狀態(tài)沒有問題，但是修改狀態(tài)會出現(xiàn)問題辐益，因為兩個模塊出現(xiàn)同名actions断傲，所以此時需要使用命名空間來解決這個問題：

const moduleA = {
    namespaced:tue,
    //...
}

修改update方法：

update(abc){
    this.$store.dispatch('$(abc)/setData', 'update $(abc)')
}