# 筆記

## 腳手架檔案結構

├── node_modules
├── public
│ ├── favicon.ico: 頁籤圖示
│ └── index.html: 主頁面
├── src
│ ├── assets: 存放靜態資源
│ │ └── logo.png
│ │── component: 存放元件
│ │ └── HelloWorld.vue
│ │── App.vue: 彙總所有元件
│ │── main.js: 入口檔案
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置檔案
├── package.json: 應用包配置檔案
├── README.md: 應用描述檔案
├── package-lock.json：包版本控制檔案

## 關於不同版本的Vue

1. vue.js與vue.runtime.xxx.js的區別：
1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。
2. vue.runtime.xxx.js是執行版的Vue，只包含：核心功能；沒有模板解析器。
2. 因為vue.runtime.xxx.js沒有模板解析器，所以不能使用template這個配置項，需要使用render函式接收到的createElement函式去指定具體內容。

## vue.config.js配置檔案

1. 使用vue inspect > output.js可以檢視到Vue腳手架的預設配置。
2. 使用vue.config.js可以對腳手架進行個性化定製，詳情見：https://cli.vuejs.org/zh

## ref屬性

1. 被用來給元素或子元件註冊引用資訊（id的替代者）
2. 應用在html標籤上獲取的是真實DOM元素，應用在元件標籤上是元件例項物件（vc）
3. 使用方式：
1. 打標識：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
2. 獲取：```this.$refs.xxx```

## props配置項

1. 功能：讓元件接收外部傳過來的資料

2. 傳遞資料：```<Demo name="xxx"/>```

3. 接收資料：

1. 第一種方式（只接收）：```props:['name'] ```

2. 第二種方式（限制類型）：```props:{name:String}```

3. 第三種方式（限制類型、限制必要性、指定預設值）：

```js
props:{
name:{
type:String, //型別
required:true, //必要性
default:'老王' //預設值
}
}
```

> 備註：props是隻讀的，Vue底層會監測你對props的修改，如果進行了修改，就會發出警告，若業務需求確實需要修改，那麼請複製props的內容到data中一份，然後去修改data中的資料。

## mixin(混入)

1. 功能：可以把多個元件共用的配置提取成一個混入物件

2. 使用方式：

第一步定義混合：

```
{
data(){....},
methods:{....}
....
}
```

第二步使用混入：

​ 全域性混入：```Vue.mixin(xxx)```
​ 區域性混入：```mixins:['xxx'] ```

## 外掛

1. 功能：用於增強Vue

2. 本質：包含install方法的一個物件，install的第一個引數是Vue，第二個以後的引數是外掛使用者傳遞的資料。

3. 定義外掛：

```js
物件.install = function (Vue, options) {
// 1. 新增全域性過濾器
Vue.filter(....)

// 2. 新增全域性指令
Vue.directive(....)

// 3. 配置全域性混入(合)
Vue.mixin(....)

// 4. 新增例項方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
}
```

4. 使用外掛：```Vue.use()```

## scoped樣式

1. 作用：讓樣式在區域性生效，防止衝突。
2. 寫法：```<style scoped>```

## 總結TodoList案例

1. 元件化編碼流程：

​ (1).拆分靜態元件：元件要按照功能點拆分，命名不要與html元素衝突。

​ (2).實現動態元件：考慮好資料的存放位置，資料是一個元件在用，還是一些元件在用：

​ 1).一個元件在用：放在元件自身即可。

​ 2). 一些元件在用：放在他們共同的父元件上（<span style="color:red">狀態提升</span>）。

​ (3).實現互動：從繫結事件開始。

2. props適用於：

​ (1).父元件 ==> 子元件 通訊

​ (2).子元件 ==> 父元件 通訊（要求父先給子一個函式）

3. 使用v-model時要切記：v-model繫結的值不能是props傳過來的值，因為props是不可以修改的！

4. props傳過來的若是物件型別的值，修改物件中的屬性時Vue不會報錯，但不推薦這樣做。

## webStorage

1. 儲存內容大小一般支援5MB左右（不同瀏覽器可能還不一樣）

2. 瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實現本地儲存機制。

3. 相關API：

1. ```xxxxxStorage.setItem('key', 'value');```
該方法接受一個鍵和值作為引數，會把鍵值對新增到儲存中，如果鍵名存在，則更新其對應的值。

2. ```xxxxxStorage.getItem('person');```

​ 該方法接受一個鍵名作為引數，返回鍵名對應的值。

3. ```xxxxxStorage.removeItem('key');```

​ 該方法接受一個鍵名作為引數，並把該鍵名從儲存中刪除。

4. ``` xxxxxStorage.clear()```

​ 該方法會清空儲存中的所有資料。

4. 備註：

1. SessionStorage儲存的內容會隨著瀏覽器視窗關閉而消失。
2. LocalStorage儲存的內容，需要手動清除才會消失。
3. ```xxxxxStorage.getItem(xxx)```如果xxx對應的value獲取不到，那麼getItem的返回值是null。
4. ```JSON.parse(null)```的結果依然是null。

## 元件的自定義事件

1. 一種元件間通訊的方式，適用於：<strong style="color:red">子元件 ===> 父元件</strong>

2. 使用場景：A是父元件，B是子元件，B想給A傳資料，那麼就要在A中給B繫結自定義事件（<span style="color:red">事件的回撥在A中</span>）。

3. 繫結自定義事件：

1. 第一種方式，在父元件中：```<Demo @atguigu="test"/>``` 或 ```<Demo v-on:atguigu="test"/>```

2. 第二種方式，在父元件中：

```js
<Demo ref="demo"/>
......
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}
```

3. 若想讓自定義事件只能觸發一次，可以使用```once```修飾符，或```$once```方法。

4. 觸發自定義事件：```this.$emit('atguigu',資料)```

5. 解綁自定義事件```this.$off('atguigu')```

6. 元件上也可以繫結原生DOM事件，需要使用```native```修飾符。

7. 注意：通過```this.$refs.xxx.$on('atguigu',回撥)```繫結自定義事件時，回撥<span style="color:red">要麼配置在methods中</span>，<span style="color:red">要麼用箭頭函式</span>，否則this指向會出問題！

## 全域性事件匯流排（GlobalEventBus）

1. 一種元件間通訊的方式，適用於<span style="color:red">任意元件間通訊</span>。

2. 安裝全域性事件匯流排：

```js
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安裝全域性事件匯流排，$bus就是當前應用的vm
},
......
})
```

3. 使用事件匯流排：

1. 接收資料：A元件想接收資料，則在A元件中給$bus繫結自定義事件，事件的<span style="color:red">回撥留在A元件自身。</span>

```js
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}
```

2. 提供資料：```this.$bus.$emit('xxxx',資料)```

4. 最好在beforeDestroy鉤子中，用$off去解綁<span style="color:red">當前元件所用到的</span>事件。

## 訊息訂閱與釋出（pubsub）

1. 一種元件間通訊的方式，適用於<span style="color:red">任意元件間通訊</span>。

2. 使用步驟：

1. 安裝pubsub：```npm i pubsub-js```

2. 引入: ```import pubsub from 'pubsub-js'```

3. 接收資料：A元件想接收資料，則在A元件中訂閱訊息，訂閱的<span style="color:red">回撥留在A元件自身。</span>

```js
methods(){
demo(data){......}
}
......
mounted() {
this.pid = pubsub.subscribe('xxx',this.demo) //訂閱訊息
}
```

4. 提供資料：```pubsub.publish('xxx',資料)```

5. 最好在beforeDestroy鉤子中，用```PubSub.unsubscribe(pid)```去<span style="color:red">取消訂閱。</span>

## nextTick

1. 語法：```this.$nextTick(回撥函式)```
2. 作用：在下一次 DOM 更新結束後執行其指定的回撥。
3. 什麼時候用：當改變資料後，要基於更新後的新DOM進行某些操作時，要在nextTick所指定的回撥函式中執行。

## Vue封裝的過度與動畫

1. 作用：在插入、更新或移除 DOM元素時，在合適的時候給元素新增樣式類名。

2. 圖示：<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />

3. 寫法：

1. 準備好樣式：

- 元素進入的樣式：
1. v-enter：進入的起點
2. v-enter-active：進入過程中
3. v-enter-to：進入的終點
- 元素離開的樣式：
1. v-leave：離開的起點
2. v-leave-active：離開過程中
3. v-leave-to：離開的終點

2. 使用```<transition>```包裹要過度的元素，並配置name屬性：

```vue
<transition name="hello">
<h1 v-show="isShow">你好啊！</h1>
</transition>
```

3. 備註：若有多個元素需要過度，則需要使用：```<transition-group>```，且每個元素都要指定```key```值。

## vue腳手架配置代理

### 方法一

​ 在vue.config.js中新增如下配置：

```js
devServer:{
proxy:"http://localhost:5000"
}
```

說明：

1. 優點：配置簡單，請求資源時直接發給前端（8080）即可。
2. 缺點：不能配置多個代理，不能靈活的控制請求是否走代理。
3. 工作方式：若按照上述配置代理，當請求了前端不存在的資源時，那麼該請求會轉發給伺服器 （優先匹配前端資源）

### 方法二

​ 編寫vue.config.js配置具體代理規則：

```js
module.exports = {
devServer: {
proxy: {
'/api1': {// 匹配所有以 '/api1'開頭的請求路徑
target: 'http://localhost:5000',// 代理目標的基礎路徑
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': {// 匹配所有以 '/api2'開頭的請求路徑
target: 'http://localhost:5001',// 代理目標的基礎路徑
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
/*
changeOrigin設定為true時，伺服器收到的請求頭中的host為：localhost:5000
changeOrigin設定為false時，伺服器收到的請求頭中的host為：localhost:8080
changeOrigin預設值為true
*/
```

說明：

1. 優點：可以配置多個代理，且可以靈活的控制請求是否走代理。
2. 缺點：配置略微繁瑣，請求資源時必須加字首。

## 插槽

1. 作用：讓父元件可以向子元件指定位置插入html結構，也是一種元件間通訊的方式，適用於 <strong style="color:red">父元件 ===> 子元件</strong> 。

2. 分類：預設插槽、具名插槽、作用域插槽

3. 使用方式：

1. 預設插槽：

```vue
父元件中：
<Category>
<div>html結構1</div>
</Category>
子元件中：
<template>
<div>
<!-- 定義插槽 -->
<slot>插槽預設內容...</slot>
</div>
</template>
```

2. 具名插槽：

```vue
父元件中：
<Category>
<template slot="center">
<div>html結構1</div>
</template>

<template v-slot:footer>
<div>html結構2</div>
</template>
</Category>
子元件中：
<template>
<div>
<!-- 定義插槽 -->
<slot name="center">插槽預設內容...</slot>
<slot name="footer">插槽預設內容...</slot>
</div>
</template>
```

3. 作用域插槽：

1. 理解：<span style="color:red">資料在元件的自身，但根據資料生成的結構需要元件的使用者來決定。</span>（games資料在Category元件中，但使用資料所遍歷出來的結構由App元件決定）

2. 具體編碼：

```vue
父元件中：
<Category>
<template scope="scopeData">
<!-- 生成的是ul列表 -->
<ul>
<li v-for="g in scopeData.games" :key="g">{{g}}</li>
</ul>
</template>
</Category>

<Category>
<template slot-scope="scopeData">
<!-- 生成的是h4標題 -->
<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
</template>
</Category>
子元件中：
<template>
<div>
<slot :games="games"></slot>
</div>
</template>

<script>
export default {
name:'Category',
props:['title'],
//資料在子元件自身
data() {
return {
games:['紅色警戒','穿越火線','勁舞團','超級瑪麗']
}
},
}
</script>
```
```

```

## Vuex

### 1.概念

​ 在Vue中實現集中式狀態（資料）管理的一個Vue外掛，對vue應用中多個元件的共享狀態進行集中式的管理（讀/寫），也是一種元件間通訊的方式，且適用於任意元件間通訊。

### 2.何時使用？

​ 多個元件需要共享資料時

### 3.搭建vuex環境

1. 建立檔案：```src/store/index.js```

```js
//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應用Vuex外掛
Vue.use(Vuex)

//準備actions物件——響應元件中使用者的動作
const actions = {}
//準備mutations物件——修改state中的資料
const mutations = {}
//準備state物件——儲存具體的資料
const state = {}

//建立並暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
```

2. 在```main.js```中建立vm時傳入```store```配置項

```js
......
//引入store
import store from './store'
......

//建立vm
new Vue({
el:'#app',
render: h => h(App),
store
})
```

### 4.基本使用

1. 初始化資料、配置```actions```、配置```mutations```，操作檔案```store.js```

```js
//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
//響應元件中加的動作
jia(context,value){
// console.log('actions中的jia被呼叫了',miniStore,value)
context.commit('JIA',value)
},
}

const mutations = {
//執行加
JIA(state,value){
// console.log('mutations中的JIA被呼叫了',state,value)
state.sum += value
}
}

//初始化資料
const state = {
sum:0
}

//建立並暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
```

2. 元件中讀取vuex中的資料：```$store.state.sum```

3. 元件中修改vuex中的資料：```$store.dispatch('action中的方法名',資料)``` 或 ```$store.commit('mutations中的方法名',資料)```

> 備註：若沒有網路請求或其他業務邏輯，元件中也可以越過actions，即不寫```dispatch```，直接編寫```commit```

### 5.getters的使用

1. 概念：當state中的資料需要經過加工後再使用時，可以使用getters加工。

2. 在```store.js```中追加```getters```配置

```js
......

const getters = {
bigSum(state){
return state.sum * 10
}
}

//建立並暴露store
export default new Vuex.Store({
......
getters
})
```

3. 元件中讀取資料：```$store.getters.bigSum```

### 6.四個map方法的使用

1. <strong>mapState方法：</strong>用於幫助我們對映```state```中的資料為計算屬性

```js
computed: {
//藉助mapState生成計算屬性：sum、school、subject（物件寫法）
...mapState({sum:'sum',school:'school',subject:'subject'}),

//藉助mapState生成計算屬性：sum、school、subject（陣列寫法）
...mapState(['sum','school','subject']),
},
```

2. <strong>mapGetters方法：</strong>用於幫助我們對映```getters```中的資料為計算屬性

```js
computed: {
//藉助mapGetters生成計算屬性：bigSum（物件寫法）
...mapGetters({bigSum:'bigSum'}),

//藉助mapGetters生成計算屬性：bigSum（陣列寫法）
...mapGetters(['bigSum'])
},
```

3. <strong>mapActions方法：</strong>用於幫助我們生成與```actions```對話的方法，即：包含```$store.dispatch(xxx)```的函式

```js
methods:{
//靠mapActions生成：incrementOdd、incrementWait（物件形式）
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

//靠mapActions生成：incrementOdd、incrementWait（陣列形式）
...mapActions(['jiaOdd','jiaWait'])
}
```

4. <strong>mapMutations方法：</strong>用於幫助我們生成與```mutations```對話的方法，即：包含```$store.commit(xxx)```的函式

```js
methods:{
//靠mapActions生成：increment、decrement（物件形式）
...mapMutations({increment:'JIA',decrement:'JIAN'}),

//靠mapMutations生成：JIA、JIAN（物件形式）
...mapMutations(['JIA','JIAN']),
}
```

> 備註：mapActions與mapMutations使用時，若需要傳遞引數需要：在模板中繫結事件時傳遞好引數，否則引數是事件物件。

### 7.模組化+名稱空間

1. 目的：讓程式碼更好維護，讓多種資料分類更加明確。

2. 修改```store.js```

```javascript
const countAbout = {
namespaced:true,//開啟名稱空間
state:{x:1},
mutations: { ... },
actions: { ... },
getters: {
bigSum(state){
return state.sum * 10
}
}
}

const personAbout = {
namespaced:true,//開啟名稱空間
state:{ ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
modules: {
countAbout,
personAbout
}
})
```

3. 開啟名稱空間後，元件中讀取state資料：

```js
//方式一：自己直接讀取
this.$store.state.personAbout.list
//方式二：藉助mapState讀取：
...mapState('countAbout',['sum','school','subject']),
```

4. 開啟名稱空間後，元件中讀取getters資料：

```js
//方式一：自己直接讀取
this.$store.getters['personAbout/firstPersonName']
//方式二：藉助mapGetters讀取：
...mapGetters('countAbout',['bigSum'])
```

5. 開啟名稱空間後，元件中呼叫dispatch

```js
//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：藉助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
```

6. 開啟名稱空間後，元件中呼叫commit

```js
//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：藉助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
```

## 路由

1. 理解： 一個路由（route）就是一組對映關係（key - value），多個路由需要路由器（router）進行管理。
2. 前端路由：key是路徑，value是元件。

### 1.基本使用

1. 安裝vue-router，命令：```npm i vue-router```

2. 應用外掛：```Vue.use(VueRouter)```

3. 編寫router配置項:

```js
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 元件
import About from '../components/About'
import Home from '../components/Home'

//建立router例項物件，去管理一組一組的路由規則
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})

//暴露router
export default router
```

4. 實現切換（active-class可配置高亮樣式）

```vue
<router-link active-class="active" to="/about">About</router-link>
```

5. 指定展示位置

```vue
<router-view></router-view>
```

### 2.幾個注意點

1. 路由元件通常存放在```pages```資料夾，一般元件通常存放在```components```資料夾。
2. 通過切換，“隱藏”了的路由元件，預設是被銷燬掉的，需要的時候再去掛載。
3. 每個元件都有自己的```$route```屬性，裡面儲存著自己的路由資訊。
4. 整個應用只有一個router，可以通過元件的```$router```屬性獲取到。

### 3.多級路由（多級路由）

1. 配置路由規則，使用children配置項：

```js
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通過children配置子級路由
{
path:'news', //此處一定不要寫：/news
component:News
},
{
path:'message',//此處一定不要寫：/message
component:Message
}
]
}
]
```

2. 跳轉（要寫完整路徑）：

```vue
<router-link to="/home/news">News</router-link>
```

### 4.路由的query引數

1. 傳遞引數

```vue
<!-- 跳轉並攜帶query引數，to的字串寫法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳轉</router-link>

<!-- 跳轉並攜帶query引數，to的物件寫法 -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id:666,
title:'你好'
}
}"
>跳轉</router-link>
```

2. 接收引數：

```js
$route.query.id
$route.query.title
```

### 5.命名路由

1. 作用：可以簡化路由的跳轉。

2. 如何使用

1. 給路由命名：

```js
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //給路由命名
path:'welcome',
component:Hello,
}
]
}
]
}
```

2. 簡化跳轉：

```vue
<!--簡化前，需要寫完整的路徑 -->
<router-link to="/demo/test/welcome">跳轉</router-link>

<!--簡化後，直接通過名字跳轉 -->
<router-link :to="{name:'hello'}">跳轉</router-link>

<!--簡化寫法配合傳遞引數 -->
<router-link
:to="{
name:'hello',
query:{
id:666,
title:'你好'
}
}"
>跳轉</router-link>
```

### 6.路由的params引數

1. 配置路由，宣告接收params引數

```js
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用佔位符宣告接收params引數
component:Detail
}
]
}
]
}
```

2. 傳遞引數

```vue
<!-- 跳轉並攜帶params引數，to的字串寫法 -->
<router-link :to="/home/message/detail/666/你好">跳轉</router-link>

<!-- 跳轉並攜帶params引數，to的物件寫法 -->
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"
>跳轉</router-link>
```

> 特別注意：路由攜帶params引數時，若使用to的物件寫法，則不能使用path配置項，必須使用name配置！

3. 接收引數：

```js
$route.params.id
$route.params.title
```

### 7.路由的props配置

​ 作用：讓路由元件更方便的收到引數

```js
{
name:'xiangqing',
path:'detail/:id',
component:Detail,

//第一種寫法：props值為物件，該物件中所有的key-value的組合最終都會通過props傳給Detail元件
// props:{a:900}

//第二種寫法：props值為布林值，布林值為true，則把路由收到的所有params引數通過props傳給Detail元件
// props:true

//第三種寫法：props值為函式，該函式返回的物件中每一組key-value都會通過props傳給Detail元件
props(route){
return {
id:route.query.id,
title:route.query.title
}
}
}
```

### 8.```<router-link>```的replace屬性

1. 作用：控制路由跳轉時操作瀏覽器歷史記錄的模式
2. 瀏覽器的歷史記錄有兩種寫入方式：分別為```push```和```replace```，```push```是追加歷史記錄，```replace```是替換當前記錄。路由跳轉時候預設為```push```
3. 如何開啟```replace```模式：```<router-link replace .......>News</router-link>```

### 9.程式設計式路由導航

1. 作用：不借助```<router-link> ```實現路由跳轉，讓路由跳轉更加靈活

2. 具體編碼：

```js
//$router的兩個API
this.$router.push({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})

this.$router.replace({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.forward() //前進
this.$router.back() //後退
this.$router.go() //可前進也可後退
```

### 10.快取路由元件

1. 作用：讓不展示的路由元件保持掛載，不被銷燬。

2. 具體編碼：

```vue
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
```

### 11.兩個新的生命週期鉤子

1. 作用：路由元件所獨有的兩個鉤子，用於捕獲路由元件的啟用狀態。
2. 具體名字：
1. ```activated```路由元件被啟用時觸發。
2. ```deactivated```路由元件失活時觸發。

### 12.路由守衛

1. 作用：對路由進行許可權控制

2. 分類：全域性守衛、獨享守衛、元件內守衛

3. 全域性守衛:

```js
//全域性前置守衛：初始化時執行、每次路由切換前執行
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){ //判斷當前路由是否需要進行許可權控制
if(localStorage.getItem('school') === 'atguigu'){ //許可權控制的具體規則
next() //放行
}else{
alert('暫無許可權檢視')
// next({name:'guanyu'})
}
}else{
next() //放行
}
})

//全域性後置守衛：初始化時執行、每次路由切換後執行
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
if(to.meta.title){
document.title = to.meta.title //修改網頁的title
}else{
document.title = 'vue_test'
}
})
```

4. 獨享守衛:

```js
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(to.meta.isAuth){ //判斷當前路由是否需要進行許可權控制
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暫無許可權檢視')
// next({name:'guanyu'})
}
}else{
next()
}
}
```

5. 元件內守衛：

```js
//進入守衛：通過路由規則，進入該元件時被呼叫
beforeRouteEnter (to, from, next) {
},
//離開守衛：通過路由規則，離開該元件時被呼叫
beforeRouteLeave (to, from, next) {
}
```

### 13.路由器的兩種工作模式

1. 對於一個url來說，什麼是hash值？—— #及其後面的內容就是hash值。
2. hash值不會包含在 HTTP 請求中，即：hash值不會帶給伺服器。
3. hash模式：
1. 地址中永遠帶著#號，不美觀 。
2. 若以後將地址通過第三方手機app分享，若app校驗嚴格，則地址會被標記為不合法。
3. 相容性較好。
4. history模式：
1. 地址乾淨，美觀 。
2. 相容性和hash模式相比略差。
3. 應用部署上線時需要後端人員支援，解決重新整理頁面服務端404的問題。