Vue 腳手架

這篇具有很好參考價值的文章主要介紹了Vue 腳手架。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

腳手架文件結(jié)構(gòu)

├── node_modules
├── public
│ ├── favicon.ico: 頁簽圖標(biāo)
│ └── index.html: 主頁面
├── src
│ ├── assets: 存放靜態(tài)資源
│ │ └── logo.png
│ │── component: 存放組件
│ │ └── HelloWorld.vue
│ │── App.vue: 匯總所有組件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 應(yīng)用包配置文件
├── README.md: 應(yīng)用描述文件
├── package-lock.json：包版本控制文件

關(guān)于不同版本的Vue

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

vue.config.js配置文件

使用vue inspect > output.js可以查看到Vue腳手架的默認(rèn)配置。
使用vue.config.js可以對腳手架進(jìn)行個性化定制，詳情見：https://cli.vuejs.org/zh

ref屬性

被用來給元素或子組件注冊引用信息（id的替代者）
應(yīng)用在html標(biāo)簽上獲取的是真實DOM元素，應(yīng)用在組件標(biāo)簽上是組件實例對象（vc）
使用方式：
1. 打標(biāo)識：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
2. 獲取：this.$refs.xxx

props配置項

功能：讓組件接收外部傳過來的數(shù)據(jù),影響范圍為本組件
傳遞數(shù)據(jù)：<Demo name="xxx"/>
接收數(shù)據(jù)：
1. 第一種方式（只接收）：props:['name']
2. 第二種方式（限制類型）：props:{name:String}
3. 第三種方式（限制類型、限制必要性、指定默認(rèn)值）：
```
props:{
 name:{
 type:String, //類型
 required:true, //必要性
 default:'老王' //默認(rèn)值
 }
}
```
備注：props是只讀的，Vue底層會監(jiān)測你對props的修改，如果進(jìn)行了修改，就會發(fā)出警告，若業(yè)務(wù)需求確實需要修改，那么請復(fù)制props的內(nèi)容到data中一份，然后去修改data中的數(shù)據(jù)。

mixin(混入)

功能：可以把多個組件共用的配置提取成一個混入對象
使用方式：

第一步定義混合：
```
{
    data(){....},
    methods:{....}
    ....
}
```
第二步使用混入：

全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']

插件

功能：用于增強Vue
本質(zhì)：包含install方法的一個對象，install的第一個參數(shù)是Vue，第二個以后的參數(shù)是插件使用者傳遞的數(shù)據(jù)。

定義插件：

對象.install = function (Vue, options) {
    // 1. 添加全局過濾器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

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

    // 4. 添加實例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

使用插件：Vue.use()

scoped樣式

作用：讓樣式在局部生效，防止沖突。
寫法：<style scoped>

總結(jié)TodoList案例

組件化編碼流程：

(1).拆分靜態(tài)組件：組件要按照功能點拆分，命名不要與html元素沖突。

(2).實現(xiàn)動態(tài)組件：考慮好數(shù)據(jù)的存放位置，數(shù)據(jù)是一個組件在用，還是一些組件在用：

? 1).一個組件在用：放在組件自身即可。

? 2). 一些組件在用：放在他們共同的父組件上（狀態(tài)提升）。

(3).實現(xiàn)交互：從綁定事件開始。
props適用于：

(1).父組件 ==> 子組件通信

(2).子組件 ==> 父組件通信（要求父先給子一個函數(shù)）
使用v-model時要切記：v-model綁定的值不能是props傳過來的值，因為props是不可以修改的！
props傳過來的若是對象類型的值，修改對象中的屬性時Vue不會報錯，但不推薦這樣做。

webStorage

存儲內(nèi)容大小一般支持5MB左右（不同瀏覽器可能還不一樣）
瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實現(xiàn)本地存儲機制。
相關(guān)API：
1. xxxxxStorage.setItem('key', 'value');
  該方法接受一個鍵和值作為參數(shù)，會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應(yīng)的值。
2. xxxxxStorage.getItem('person');
  
  ? 該方法接受一個鍵名作為參數(shù)，返回鍵名對應(yīng)的值。
3. xxxxxStorage.removeItem('key');
  
  ? 該方法接受一個鍵名作為參數(shù)，并把該鍵名從存儲中刪除。
4. xxxxxStorage.clear()
  
  ? 該方法會清空存儲中的所有數(shù)據(jù)。
備注：
1. SessionStorage存儲的內(nèi)容會隨著瀏覽器窗口關(guān)閉而消失。
2. LocalStorage存儲的內(nèi)容，需要手動清除才會消失。
3. xxxxxStorage.getItem(xxx)如果xxx對應(yīng)的value獲取不到，那么getItem的返回值是null。
4. JSON.parse(null)的結(jié)果依然是null。

組件的自定義事件

一種組件間通信的方式，適用于：子組件 ===> 父組件
使用場景：A是父組件，B是子組件，B想給A傳數(shù)據(jù)，那么就要在A中給B綁定自定義事件（事件的回調(diào)在A中）。
綁定自定義事件：
1. 第一種方式，在父組件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
2. 第二種方式，在父組件中：
```
<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}
```
3. 若想讓自定義事件只能觸發(fā)一次，可以使用once修飾符，或$once方法。
觸發(fā)自定義事件：this.$emit('atguigu',數(shù)據(jù))
解綁自定義事件this.$off('atguigu')
組件上也可以綁定原生DOM事件，需要使用native修飾符。
注意：通過this.$refs.xxx.$on('atguigu',回調(diào))綁定自定義事件時，回調(diào)要么配置在methods中，要么用箭頭函數(shù)，否則this指向會出問題！

全局事件總線（GlobalEventBus）

一種組件間通信的方式，適用于任意組件間通信。

安裝全局事件總線：

new Vue({
   ......
   beforeCreate() {
      Vue.prototype.$bus = this //安裝全局事件總線，$bus就是當(dāng)前應(yīng)用的vm
   },
    ......
})

使用事件總線：
1. 接收數(shù)據(jù)：A組件想接收數(shù)據(jù)，則在A組件中給$bus綁定自定義事件，事件的回調(diào)留在A組件自身。
```
methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}
```
2. 提供數(shù)據(jù)：this.$bus.$emit('xxxx',數(shù)據(jù))
最好在beforeDestroy鉤子中，用$off去解綁當(dāng)前組件所用到的事件。

消息訂閱與發(fā)布（pubsub）

一種組件間通信的方式，適用于任意組件間通信。
使用步驟：
1. 安裝pubsub：npm i pubsub-js
2. 引入: import pubsub from 'pubsub-js'
3. 接收數(shù)據(jù)：A組件想接收數(shù)據(jù)，則在A組件中訂閱消息，訂閱的回調(diào)留在A組件自身。
```
methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //訂閱消息
}
```
4. 提供數(shù)據(jù)：pubsub.publish('xxx',數(shù)據(jù))
5. 最好在beforeDestroy鉤子中，用PubSub.unsubscribe(pid)去取消訂閱。

nextTick

語法：this.$nextTick(回調(diào)函數(shù))
作用：在下一次 DOM 更新結(jié)束后執(zhí)行其指定的回調(diào)。
什么時候用：當(dāng)改變數(shù)據(jù)后，要基于更新后的新DOM進(jìn)行某些操作時，要在nextTick所指定的回調(diào)函數(shù)中執(zhí)行。

Vue封裝的過度與動畫

作用：在插入、更新或移除 DOM元素時，在合適的時候給元素添加樣式類名。
圖示：
寫法：
1. 準(zhǔn)備好樣式：
  - 元素進(jìn)入的樣式：
    1. v-enter：進(jìn)入的起點
    2. v-enter-active：進(jìn)入過程中
    3. v-enter-to：進(jìn)入的終點
  - 元素離開的樣式：
    1. v-leave：離開的起點
    2. v-leave-active：離開過程中
    3. v-leave-to：離開的終點
2. 使用<transition>包裹要過度的元素，并配置name屬性：
```
<transition name="hello">
   <h1 v-show="isShow">你好??！</h1>
</transition>
```
3. 備注：若有多個元素需要過度，則需要使用：<transition-group>，且每個元素都要指定key值。

vue腳手架配置代理

方法一

在vue.config.js中添加如下配置：

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

說明：

優(yōu)點：配置簡單，請求資源時直接發(fā)給前端（8080）即可。
缺點：不能配置多個代理，不能靈活的控制請求是否走代理。
工作方式：若按照上述配置代理，當(dāng)請求了前端不存在的資源時，那么該請求會轉(zhuǎn)發(fā)給服務(wù)器（優(yōu)先匹配前端資源）

方法二

編寫vue.config.js配置具體代理規(guī)則：

module.exports = {
   devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'開頭的請求路徑
        target: 'http://localhost:5000',// 代理目標(biāo)的基礎(chǔ)路徑
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'開頭的請求路徑
        target: 'http://localhost:5001',// 代理目標(biāo)的基礎(chǔ)路徑
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin設(shè)置為true時，服務(wù)器收到的請求頭中的host為：localhost:5000
   changeOrigin設(shè)置為false時，服務(wù)器收到的請求頭中的host為：localhost:8080
   changeOrigin默認(rèn)值為true
*/

說明：

優(yōu)點：可以配置多個代理，且可以靈活的控制請求是否走代理。
缺點：配置略微繁瑣，請求資源時必須加前綴。

插槽

作用：讓父組件可以向子組件指定位置插入html結(jié)構(gòu)，也是一種組件間通信的方式，適用于 父組件 ===> 子組件 。
分類：默認(rèn)插槽、具名插槽、作用域插槽

使用方式：

默認(rèn)插槽：

父組件中：
        <Category>
           <div>html結(jié)構(gòu)1</div>
        </Category>
子組件中：
        <template>
            <div>
               <!-- 定義插槽 -->
               <slot>插槽默認(rèn)內(nèi)容...</slot>
            </div>
        </template>

具名插槽：

父組件中：
        <Category>
            <template slot="center">
              <div>html結(jié)構(gòu)1</div>
            </template>

            <template v-slot:footer>
               <div>html結(jié)構(gòu)2</div>
            </template>
        </Category>
子組件中：
        <template>
            <div>
               <!-- 定義插槽 -->
               <slot name="center">插槽默認(rèn)內(nèi)容...</slot>
               <slot name="footer">插槽默認(rèn)內(nèi)容...</slot>
            </div>
        </template>

作用域插槽：

理解：數(shù)據(jù)在組件的自身，但根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者來決定。（games數(shù)據(jù)在Category組件中，但使用數(shù)據(jù)所遍歷出來的結(jié)構(gòu)由App組件決定）

具體編碼：

父組件中：
      <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標(biāo)題 -->
            <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'],
                //數(shù)據(jù)在子組件自身
                data() {
                    return {
                        games:['紅色警戒','穿越火線','勁舞團','超級瑪麗']
                    }
                },
            }
        </script>

Vuex

1.概念

? 在Vue中實現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個Vue插件，對vue應(yīng)用中多個組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信。

2.何時使用？

? 多個組件需要共享數(shù)據(jù)時

3.搭建vuex環(huán)境

創(chuàng)建文件：src/store/index.js

//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應(yīng)用Vuex插件
Vue.use(Vuex)

//準(zhǔn)備actions對象——響應(yīng)組件中用戶的動作
const actions = {}
//準(zhǔn)備mutations對象——修改state中的數(shù)據(jù)
const mutations = {}
//準(zhǔn)備state對象——保存具體的數(shù)據(jù)
const state = {}

//創(chuàng)建并暴露store
export default new Vuex.Store({
   actions,
   mutations,
   state
})

在main.js中創(chuàng)建vm時傳入store配置項

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

//創(chuàng)建vm
new Vue({
   el:'#app',
   render: h => h(App),
   store
})

4.基本使用

初始化數(shù)據(jù)、配置actions、配置mutations，操作文件store.js

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

const actions = {
    //響應(yīng)組件中加的動作
   jia(context,value){
      // console.log('actions中的jia被調(diào)用了',miniStore,value)
      context.commit('JIA',value)
   },
}

const mutations = {
    //執(zhí)行加
   JIA(state,value){
      // console.log('mutations中的JIA被調(diào)用了',state,value)
      state.sum += value
   }
}

//初始化數(shù)據(jù)
const state = {
   sum:0
}

//創(chuàng)建并暴露store
export default new Vuex.Store({
   actions,
   mutations,
   state,
})

組件中讀取vuex中的數(shù)據(jù)：$store.state.sum
組件中修改vuex中的數(shù)據(jù)：$store.dispatch('action中的方法名',數(shù)據(jù)) 或 $store.commit('mutations中的方法名',數(shù)據(jù))

備注：若沒有網(wǎng)絡(luò)請求或其他業(yè)務(wù)邏輯，組件中也可以越過actions，即不寫dispatch，直接編寫commit

5.getters的使用

概念：當(dāng)state中的數(shù)據(jù)需要經(jīng)過加工后再使用時，可以使用getters加工。

在store.js中追加getters配置

......

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

//創(chuàng)建并暴露store
export default new Vuex.Store({
   ......
   getters
})

組件中讀取數(shù)據(jù)：$store.getters.bigSum

6.四個map方法的使用

mapState方法：用于幫助我們映射state中的數(shù)據(jù)為計算屬性

computed: {
    //借助mapState生成計算屬性：sum、school、subject（對象寫法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成計算屬性：sum、school、subject（數(shù)組寫法）
    ...mapState(['sum','school','subject']),
},

mapGetters方法：用于幫助我們映射getters中的數(shù)據(jù)為計算屬性

computed: {
    //借助mapGetters生成計算屬性：bigSum（對象寫法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成計算屬性：bigSum（數(shù)組寫法）
    ...mapGetters(['bigSum'])
},

mapActions方法：用于幫助我們生成與actions對話的方法，即：包含$store.dispatch(xxx)的函數(shù)

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

    //靠mapActions生成：incrementOdd、incrementWait（數(shù)組形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

mapMutations方法：用于幫助我們生成與mutations對話的方法，即：包含$store.commit(xxx)的函數(shù)

methods:{
    //靠mapActions生成：increment、decrement（對象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（對象形式）
    ...mapMutations(['JIA','JIAN']),
}

備注：mapActions與mapMutations使用時，若需要傳遞參數(shù)需要：在模板中綁定事件時傳遞好參數(shù)，否則參數(shù)是事件對象。

7.模塊化+命名空間

目的：讓代碼更好維護(hù)，讓多種數(shù)據(jù)分類更加明確。

修改store.js

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
  }
})

開啟命名空間后，組件中讀取state數(shù)據(jù)：

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

開啟命名空間后，組件中讀取getters數(shù)據(jù)：

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

開啟命名空間后，組件中調(diào)用dispatch

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

開啟命名空間后，組件中調(diào)用commit

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

路由

理解：一個路由（route）就是一組映射關(guān)系（key - value），多個路由需要路由器（router）進(jìn)行管理。
前端路由：key是路徑，value是組件。

1.基本使用

安裝vue-router，命令：npm i vue-router
應(yīng)用插件：Vue.use(VueRouter)

編寫router配置項:

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

//創(chuàng)建router實例對象，去管理一組一組的路由規(guī)則
const router = new VueRouter({
   routes:[
      {
         path:'/about',
         component:About
      },
      {
         path:'/home',
         component:Home
      }
   ]
})

//暴露router
export default router

實現(xiàn)切換（active-class可配置高亮樣式）

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

指定展示位置
```
<router-view></router-view>
```

2.幾個注意點

路由組件通常存放在pages文件夾，一般組件通常存放在components文件夾。
通過切換，“隱藏”了的路由組件，默認(rèn)是被銷毀掉的，需要的時候再去掛載。
每個組件都有自己的$route屬性，里面存儲著自己的路由信息。
整個應(yīng)用只有一個router，可以通過組件的$router屬性獲取到。

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

配置路由規(guī)則，使用children配置項：

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

跳轉(zhuǎn)（要寫完整路徑）：

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

4.路由的query參數(shù)

傳遞參數(shù)

<!-- 跳轉(zhuǎn)并攜帶query參數(shù)，to的字符串寫法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳轉(zhuǎn)</router-link>
            
<!-- 跳轉(zhuǎn)并攜帶query參數(shù)，to的對象寫法 -->
<router-link 
   :to="{
      path:'/home/message/detail',
      query:{
         id:666,
            title:'你好'
      }
   }"
>跳轉(zhuǎn)</router-link>

接收參數(shù)：
```
$route.query.id
$route.query.title
```

5.命名路由

作用：可以簡化路由的跳轉(zhuǎn)。

如何使用

給路由命名：

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

簡化跳轉(zhuǎn)：

<!--簡化前，需要寫完整的路徑 -->
<router-link to="/demo/test/welcome">跳轉(zhuǎn)</router-link>

<!--簡化后，直接通過名字跳轉(zhuǎn) -->
<router-link :to="{name:'hello'}">跳轉(zhuǎn)</router-link>

<!--簡化寫法配合傳遞參數(shù) -->
<router-link 
   :to="{
      name:'hello',
      query:{
         id:666,
            title:'你好'
      }
   }"
>跳轉(zhuǎn)</router-link>

6.路由的params參數(shù)

配置路由，聲明接收params參數(shù)

{
   path:'/home',
   component:Home,
   children:[
      {
         path:'news',
         component:News
      },
      {
         component:Message,
         children:[
            {
               name:'xiangqing',
               path:'detail/:id/:title', //使用占位符聲明接收params參數(shù)
               component:Detail
            }
         ]
      }
   ]
}

傳遞參數(shù)

<!-- 跳轉(zhuǎn)并攜帶params參數(shù)，to的字符串寫法 -->
<router-link :to="/home/message/detail/666/你好">跳轉(zhuǎn)</router-link>
            
<!-- 跳轉(zhuǎn)并攜帶params參數(shù)，to的對象寫法 -->
<router-link 
   :to="{
      name:'xiangqing',
      params:{
         id:666,
            title:'你好'
      }
   }"
>跳轉(zhuǎn)</router-link>

特別注意：路由攜帶params參數(shù)時，若使用to的對象寫法，則不能使用path配置項，必須使用name配置！

接收參數(shù)：
```
$route.params.id
$route.params.title
```

7.路由的props配置

作用：讓路由組件更方便的收到參數(shù)

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

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

   //第二種寫法：props值為布爾值，布爾值為true，則把路由收到的所有params參數(shù)通過props傳給Detail組件
   // props:true
   
   //第三種寫法：props值為函數(shù)，該函數(shù)返回的對象中每一組key-value都會通過props傳給Detail組件
   props(route){
      return {
         id:route.query.id,
         title:route.query.title
      }
   }
}

8.<router-link>的replace屬性

作用：控制路由跳轉(zhuǎn)時操作瀏覽器歷史記錄的模式
瀏覽器的歷史記錄有兩種寫入方式：分別為push和replace，push是追加歷史記錄，replace是替換當(dāng)前記錄。路由跳轉(zhuǎn)時候默認(rèn)為push
如何開啟replace模式：<router-link replace .......>News</router-link>

9.編程式路由導(dǎo)航

作用：不借助<router-link> 實現(xiàn)路由跳轉(zhuǎn)，讓路由跳轉(zhuǎn)更加靈活

具體編碼：

//$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() //前進(jìn)
this.$router.back() //后退
this.$router.go() //可前進(jìn)也可后退

10.緩存路由組件

作用：讓不展示的路由組件保持掛載，不被銷毀。

具體編碼：

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

11.兩個新的生命周期鉤子

作用：路由組件所獨有的兩個鉤子，用于捕獲路由組件的激活狀態(tài)。
具體名字：
1. activated路由組件被激活時觸發(fā)。
2. deactivated路由組件失活時觸發(fā)。

12.路由守衛(wèi)

作用：對路由進(jìn)行權(quán)限控制
分類：全局守衛(wèi)、獨享守衛(wèi)、組件內(nèi)守衛(wèi)

全局守衛(wèi):

//全局前置守衛(wèi)：初始化時執(zhí)行、每次路由切換前執(zhí)行
router.beforeEach((to,from,next)=>{
   console.log('beforeEach',to,from)
   if(to.meta.isAuth){ //判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制
      if(localStorage.getItem('school') === 'atguigu'){ //權(quán)限控制的具體規(guī)則
         next() //放行
      }else{
         alert('暫無權(quán)限查看')
         // next({name:'guanyu'})
      }
   }else{
      next() //放行
   }
})

//全局后置守衛(wèi)：初始化時執(zhí)行、每次路由切換后執(zhí)行
router.afterEach((to,from)=>{
   console.log('afterEach',to,from)
   if(to.meta.title){ 
      document.title = to.meta.title //修改網(wǎng)頁的title
   }else{
      document.title = 'vue_test'
   }
})

獨享守衛(wèi):

beforeEnter(to,from,next){
   console.log('beforeEnter',to,from)
   if(to.meta.isAuth){ //判斷當(dāng)前路由是否需要進(jìn)行權(quán)限控制
      if(localStorage.getItem('school') === 'atguigu'){
         next()
      }else{
         alert('暫無權(quán)限查看')
         // next({name:'guanyu'})
      }
   }else{
      next()
   }
}

組件內(nèi)守衛(wèi)：

//進(jìn)入守衛(wèi)：通過路由規(guī)則，進(jìn)入該組件時被調(diào)用
beforeRouteEnter (to, from, next) {
},
//離開守衛(wèi)：通過路由規(guī)則，離開該組件時被調(diào)用
beforeRouteLeave (to, from, next) {
}

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

對于一個url來說，什么是hash值？—— #及其后面的內(nèi)容就是hash值。
hash值不會包含在 HTTP 請求中，即：hash值不會帶給服務(wù)器。
hash模式：
1. 地址中永遠(yuǎn)帶著#號，不美觀。
2. 若以后將地址通過第三方手機app分享，若app校驗嚴(yán)格，則地址會被標(biāo)記為不合法。
3. 兼容性較好。
history模式：文章來源地址http://www.zghlxwxcb.cn/news/detail-843094.html
1. 地址干凈，美觀。
2. 兼容性和hash模式相比略差。
3. 應(yīng)用部署上線時需要后端人員支持，解決刷新頁面服務(wù)端404的問題。