一、vue3專案中如何配置路由：

1.下載vue-router,在路由檔案中引入相關依賴

2.建立路由資訊物件陣列

3.建立路由管理器物件並對外丟擲

4.在main.js使用use(router)方法，將路由管理器物件與當前vue專案相關聯

5.在專案中設定路由導航router-link與路由出口router-view

二、動態路由：

1.定義：我們經常需要把某種模式匹配到的所有路由，全部對映到同個元件。

例如：我們有一個User元件，對於所有ID各不相同的使用者，都要使用這個元件渲染

2.動態路由的傳參：

《1》params傳參：

定義動態路由：{path: '/user/:id/:name/:age',component:User}

傳輸引數：<router-link to="/user/1/tom/18>user-1</router-link>

接收引數：

<p>使用者id--{{$route.params.id}}</p>
<p>使用者名稱稱--{{$route.params.name}}</p> <p>使用者年齡--{{$route.params.age}}</p>

 《2》props傳參

值為布林值的形式：

    定義動態路由：{path:'/user/:id/:name/:age',component:User,props:true}

    傳輸引數：

<router-link to="/user/1/tom/18">user-1 &nbsp; &nbsp;</router-link>
<router-link to="/user/2/jack/28">user-2 &nbsp; &nbsp;</router-link>
<router-link to="/user/3/mary/18">user-3 &nbsp; &nbsp;</router-link>

    接收引數：props:['id','name','age']

值為函式的形式：

    定義動態路由：{path:'/user',name:'user',component:User,props:function(route){return{id:route.params.id,name:route.params.name,age:route.params.age}}}

    傳輸引數：<router-link v-bind:to="{name:'user',params:{id:4,name:'test',age:25}}">user-4 &nbsp; &nbsp;</router-link>

    接收引數：props:['id','name','age']

《3》動態路由切換時的特點：

     動態路由當路由發生切換時，並不會重新渲染路由元件，而會使用已經渲染過的路由元件（只是會修改路由引數值）。這樣增加了程式的高效及時性；另一方面，元件的生命週期鉤子回撥函式將不會再次呼叫。

  如何解決：

//beforeRouteUpdate 當前路由發生改變，但該組建並沒有重新建立而是被複用時
//舉例： /user/1/tom/18 改變為 /user/2/bob/20
beforeRouteUpdate(to,from,next){
console.log(to.params.name); //to：跳轉之後的路由資訊物件
console.log(from.params.name); //from：跳轉之前的路由資訊物件
next(); //必須呼叫，程式碼向後執行
}
}m：跳轉之前的路由資訊物件
next(); //必須呼叫，程式碼向後執行
}
}

三、元件之間的資料通訊：

《一》、父子元件之間資料通訊：

1.第一種：父-->子 props傳遞資料；子-->父  觸發自定義事件的形式

2.第二種：provide....inject結構      父元件provide丟擲資料，子元件inject接收資料

《二》、非父子元件之間資料通訊：

1.第一種：事件匯流排Bus（空vue物件）

2.第二種：狀態管理庫vuex

四、狀態管理庫vuex

1.定義：

vuex是一個專門為vue.js應用程式開發的狀態管理庫。狀態就是指元件之間共享的資料

2.vue專案中配置狀態管理庫vuex的流程：

《1》下載並引入vuex相關內容

《2》建立狀態管理庫物件store

《3》對外丟擲store物件

《4》在main.js中將store與當前專案相關聯

3.store狀態管理庫物件重要組成部分

《1》state：元件之間共享的資料集合：

元件中獲取方法：1.直接獲取    this.$store.state.xxx;

                             2.使用物件展開運算子的mapState形式獲取:      ...mapState(['count','users'])

《2》getters:相當於store物件計算屬性（主要用於對state的資料進行過濾）

元件中獲取方法：1.直接獲取：this.$store.getters.xxx

                             2.使用物件展開運算子mapGetters的形式獲取：    ...mapGetters(['xxx','xxx'])

《3》mutations:定義了修改store物件中state資料的同步方法（要修改的資料不是ajax非同步獲取的

元件如何觸發：1.直接使用commit觸發     this.$store.commit('xxxx','傳遞的引數')

                          2.使用物件展開運算子mapMutations的形式獲取:    ...mapMutations(['xxx','xxx'])

《4》actions:定義了修改state資料的非同步方法（修改資料是ajax獲取的非同步資料)

元件中如何觸發：1.直接使用dispatch觸發     this.$store.dispatch('xxxx','傳遞的引數')

                             2.使用物件展開運算子mapActions的形式獲取:    ...mapActions(['xxx','xxx'])