Vue3 路由與狀態(tài)管理

Vue3 路由

• main.js 如果 router、store 里面都是 index.js 那么 index.js 是可以省略的，如果是自配置項不是這個名字，則必須加上，如 index1.js，就必須把 index1.js 也加上import router from './router/index1.js'
• 歷史模式可以使用 window.history 對應的方法
• 路由默認在 router 里配置
• 頁面級組件默認在 views 里配置
• 配置步驟：
  • 在 views 里面建好新的組件
  • 在 router 的 index.js 里面引入創(chuàng)建路由的方法 createRouter 跟創(chuàng)建歷史的方法，這里可以選擇是歷史還是哈希等
  • 將創(chuàng)建路由聲明一個路由器常量導出
  • 常量中配置兩項內(nèi)容，第一個是創(chuàng)建歷史的方法，另一個是多個路由及頁面的指向
  • 在路由里配置每一個頁面
  • router/index.js 路由中配置內(nèi)容：
    1. 指定 path 路徑，格式是/+路徑名稱，如：path:'/page'
    2. 起一個名字，這里需要注意名字不要重名，我們要根據(jù)這個名字去找這個組件
    3. router/index.js 導入相關(guān)組件
    4. 使用 component 使用組件
    5. 如果都放在路由常量中，會出現(xiàn)一個問題，就是打包后，所有的文件都會進入到一個 js 中，也就是每次不管加載哪個頁面，所有的 js 都會加載一次，處理方法就是使用懶加載
    6. 懶加載是一個匿名函數(shù)導入的方式，即用const Page = ()=>import('../views/Page.vue')替換掉import Page from '../views/Page.vue',然后 component 的值就用這個常量即可
    7. 懶加載后每次打包每個頁面組件都會單獨生成一個 js 文件
• 歷史模式可以使用 history 對應的方法
• 可以通過更改 createRouter 的參數(shù)改變創(chuàng)建歷史的方法
• 路由里可以獲取到路徑、全名等信息，路由器可以做分發(fā)用
• $route 當前路由
  • $route.path 獲取當前路由的相對路徑
• $router 路由器 分發(fā)用
  • $router.push(‘/page’,{}),里面兩個參數(shù)，第一個是地址，第二個是要加的參數(shù)
• $route與$router 注意不要丟了前面的$符號
• 在 data()或者 methods 里用的時候別忘了前面加 this
• children 加子路由,子路由里面加數(shù)組，數(shù)組內(nèi)是子路由相關(guān)路由的信息
• 動態(tài)子路由兩種方式，1、:+id，2、?+id
  • :+id
    • 在 router 下的 index.js 配置文件里，路徑后面加:id 后即可生效
    • :+id,就是路由后面直接加 /id 的內(nèi)容如”./demo/src/views/name/6”
    • 可以使用$route.params.id 來獲取 id 的值
  • ?+id
    • 不用在 router 下的 index.js 配置文件里配置，直接路徑后面加內(nèi)容即可生效
    • ?+id,就是路由后面加 ?id=XX 的內(nèi)容如”./demo/src/views/name?id=6”
    • 可以使用 query 來獲取傳參的內(nèi)容,$route.query.id
  • this.$router.push
  • 可以使用this.$router.push({ path: "/user/info", query: { age: 28 } });這個方法直接用路由器進行傳參
• 導航守衛(wèi)
  • 導航守衛(wèi)按植入路由導航過程中的機會分為
    • 全局導航守衛(wèi)
    • 路由獨享的守衛(wèi)
    • 組件內(nèi)的守衛(wèi)
  • 導航守衛(wèi)按照使用的用途不同又分為
    • 前置守衛(wèi)（可以用作判斷上個頁面是哪里過來的，是否可以帶有某些權(quán)限）
    • 后置守衛(wèi)（可以將某些 404 頁面等統(tǒng)一跳轉(zhuǎn)到某個頁面）
  • from.fullPath 與 to.fullPath 可以獲取從哪里來或者到哪里去的路徑

Vuex 狀態(tài)管理

當頁面多個子組件或頁面級組件都同時需要用到一個內(nèi)容時，可以考慮使用 Vuex，設(shè)置一個超全局變量

• 在 store 文件夾下的 index.js 中
  • state
    • state 中是存放全局變量的
    • 引用使用$store.state.變量名來引用變量
    • 需要注意這里如果用 a 標簽跳到某個鏈接，是會刷新頁面的，到時候變量存的值就會被刷新掉，需要避免使用 a 標簽
  • mutations
    • mutations 狀態(tài)管理，過了狀態(tài)管理的方法可以在 devtools 中查看狀態(tài)
    • mutations 中的計算屬性的參數(shù)第一個固定是 state
    • state 后面還可以加參數(shù)，這個參數(shù)可以是單個值，如果是多個值，可以傳一個對象進來
    • 在 Vue 頁面 methods 方法中使用 this.$store.commit()調(diào)用
    • commit()里面以字符串的形式傳入函數(shù)名
    • 在 Vue 頁面 methods 方法中，store 別掉了$符號
    • index.js 中 state 不要加$符號，因為他是傳參進來的
  • getters
    • getters 計算屬性存放在這里面
    • 可以寫多個計算屬性的方法
    • 引用使用$store.getters.計算屬性名來引用
    • 由于 getters 是一個屬性，不能直接接收參數(shù)，如果必須接收參數(shù)，可以在內(nèi)部寫一個匿名函數(shù)去調(diào)用參數(shù)
  • actions
    • actions 可以將數(shù)據(jù)庫的數(shù)據(jù)處理后傳給 mutations
    • mutations 再將 state 的值改變
    • actions 里的函數(shù)是一個異步回調(diào)函數(shù)
    • actions 里的函數(shù)接收的參數(shù)可以是一個上下文 context，在傳參后將其結(jié)構(gòu)賦值，或者直接子啊設(shè)置參數(shù)時，將其解構(gòu)賦值（如{state, commit, getters},必須是這仨）
    • Vue 文件中的方法里使用 this.$store.dispatch(“actions 中的方法名”);來調(diào)用 actions 中的方法
  • modules
    • 在項目較大的時候可以加一些模塊的劃分跟文件拆分，生成多個 state、mutations、getters、actions

批改老師：PHPz

批改狀態(tài)：合格

老師批語：