推薦工具：

1、vue router

選擇安裝插件。。

···

history和hash模式：

• hash模式默認的，多一個#

• hash兼容性更好
• history模式，不帶#，更好看

routes：組件路由

如何進行切換的操作：

也可以使用name方式：

【練習(xí)】下面自己寫個組件配置到路由上：

1、新建vue：

2、在router上引入剛剛創(chuàng)建的vue：

3、配置路由

4、在根組件上通過rouer-link來使用

動態(tài)路由：

比如一個場景，視頻組件根據(jù)id不同展示不同視頻；

1、在router設(shè)置動態(tài)路由

如果希望在組件內(nèi)部可以訪問那個id，那就設(shè)置props為true；

組件內(nèi)部通過props方式接受參數(shù)：

在根組件使用動態(tài)路由：

也可以通過name方式來寫：

嵌套路由：

使用場景：針對具體的視頻，視頻組件內(nèi)部也有視頻的基本信息，或者是視頻其他更加細分的子功能，比如點贊情況。

1、配置二級的路由子組件

2、創(chuàng)建相應(yīng)的子組件

3、在ID的子組件頁面下，把嵌套子組件寫進來

編程式導(dǎo)航

場景：登錄狀態(tài)過期了，自動跳轉(zhuǎn)到登錄頁。說白了就是個自動控制的過程，不用人為手動操作。

路由跳轉(zhuǎn)時，傳遞參數(shù)

1、起始頁面使用query傳遞：

2、在目的頁面接受參數(shù)

導(dǎo)航守衛(wèi)

可以給所有的導(dǎo)航做一個統(tǒng)一設(shè)置。

VUEX

五個功能：

1、存數(shù)據(jù)

聲明之后，就可以在任意地方使用了。

2、全局中修改狀態(tài)，使用mutation

mutation是指對數(shù)據(jù)進行修改的操作。在Vue中，mutation是指用來改變狀態(tài)的函數(shù)，它必須是同步的，用來更新store中的狀態(tài)。通過提交一個mutation來改變狀態(tài)，可以在mutation中對數(shù)據(jù)進行操作，例如賦值、計算等。mutation是通過commit方法來觸發(fā)的。

為了以后容易維護，只能在mutation上操作。

這里是state.屬性，不同于vue其他地方，是this.屬性

寫好了方法，然后怎么執(zhí)行呢？

總結(jié)：

• mutations需要通過commit來做提交
• mutations必須是同步的

actions是用來做異步包裝

包一層。

這樣使用：

異步的，在同步執(zhí)行完后再執(zhí)行。

getters：

定義：

訪問：

多加幾個：

打日志

只執(zhí)行一回，因為有緩存性。

modules：

數(shù)據(jù)隔離。

怎么用呢？多包一層。

然后export

還要認真看看文檔。

okay。