Vue學習進階vue_test

筆記

腳手架文件結構

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

關于不同版本的Vue

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

vue.config.js配置文件

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

ref屬性

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

props配置項

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

mixin(混入)

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

使用方式：

第一步定義混合：

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

第二步使用混入：

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

插件

功能：用于增強Vue
本質：包含install方法的一個對象话速，install的第一個參數是Vue讶踪，第二個以后的參數是插件使用者傳遞的數據。

定義插件：編寫pulgins.js文件如下

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

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

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

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

使用插件：在main.js中import引入插件泊交，然后用Vue.use()使用

scoped樣式

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

總結TodoList案例

組件化編碼流程：

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

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

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

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

 (3).實現交互：從綁定事件開始雹熬。

props適用于：

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

 (2).子組件 ==> 父組件 通信（要求父先給子一個函數）

使用v-model時要切記：v-model綁定的值不能是props傳過來的值宽菜，因為props是不可以修改的！
props傳過來的若是對象類型的值竿报，修改對象中的屬性時Vue不會報錯赋焕，但不推薦這樣做。

webStorage

存儲內容大小一般支持5MB左右（不同瀏覽器可能還不一樣）
瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實現本地存儲機制仰楚。
相關API：
1. xxxxxStorage.setItem('key', 'value');
  該方法接受一個鍵和值作為參數，會把鍵值對添加到存儲中犬庇，如果鍵名存在僧界，則更新其對應的值。
2. xxxxxStorage.getItem('person');
```
     該方法接受一個鍵名作為參數臭挽，返回鍵名對應的值捂襟。
```
3. xxxxxStorage.removeItem('key');
```
     該方法接受一個鍵名作為參數，并把該鍵名從存儲中刪除欢峰。
```
4. xxxxxStorage.clear()
```
     該方法會清空存儲中的所有數據葬荷。
```
備注：
1. SessionStorage存儲的內容會隨著瀏覽器窗口關閉而消失涨共。
2. LocalStorage存儲的內容，需要手動清除才會消失宠漩。
3. xxxxxStorage.getItem(xxx)如果xxx對應的value獲取不到举反，那么getItem的返回值是null。
4. JSON.parse(null)的結果依然是null扒吁。

組件的自定義事件

一種組件間通信的方式火鼻，適用于：子組件 ===> 父組件
使用場景：A是父組件，B是子組件雕崩，B想給A傳數據魁索，那么就要在A中給B綁定自定義事件（事件的回調在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',數據)
解綁自定義事件this.$off('atguigu')
組件上也可以綁定原生DOM事件，需要使用native修飾符趁窃。
注意：通過this.$refs.xxx.$on('atguigu',回調)綁定自定義事件時牧挣，回調要么配置在methods中，要么用箭頭函數醒陆，否則this指向會出問題瀑构！

全局事件總線（GlobalEventBus）

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

安裝全局事件總線：

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

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

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

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

nextTick

語法：this.$nextTick(回調函數)
作用：在下一次 DOM 更新結束后執(zhí)行其指定的回調。
什么時候用：當改變數據后嗅榕，要基于更新后的新DOM進行某些操作時顺饮，要在nextTick所指定的回調函數中執(zhí)行吵聪。

Vue封裝的過度與動畫

作用：在插入、更新或移除 DOM元素時兼雄，在合適的時候給元素添加樣式類名吟逝。
圖示：<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />
寫法：
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屬性：
```
<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）即可恕稠。
缺點：不能配置多個代理琅绅，不能靈活的控制請求是否走代理。
工作方式：若按照上述配置代理鹅巍，當請求了前端不存在的資源時千扶，那么該請求會轉發(fā)給服務器（優(yōu)先匹配前端資源）

方法二

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

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
*/

說明：

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

插槽

作用：讓父組件可以向子組件指定位置插入html結構，也是一種組件間通信的方式枫攀，適用于 父組件 ===> 子組件 括饶。
分類：默認插槽、具名插槽来涨、作用域插槽

使用方式：

默認插槽：

父組件中：
        <Category>
           <div>html結構1</div>
        </Category>
子組件中：
        <template>
            <div>
               <!-- 定義插槽 -->
               <slot>插槽默認內容...</slot>
            </div>
        </template>

具名插槽：

父組件中：
        <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>

作用域插槽：

理解：數據在組件的自身图焰，但根據數據生成的結構需要組件的使用者來決定。（games數據在Category組件中蹦掐，但使用數據所遍歷出來的結構由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標題 -->
               <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中實現集中式狀態(tài)（數據）管理的一個Vue插件技羔，對vue應用中多個組件的共享狀態(tài)進行集中式的管理（讀/寫），也是一種組件間通信的方式卧抗，且適用于任意組件間通信藤滥。

2.何時使用？

    多個組件需要共享數據時

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

創(chuàng)建文件：src/store/index.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 = {}

//創(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.基本使用

初始化數據颗味、配置actions、配置mutations牺弹，操作文件store.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 = {
    //執(zhí)行加
 JIA(state,value){
     // console.log('mutations中的JIA被調用了',state,value)
     state.sum += value
 }
}

//初始化數據
const state = {
   sum:0
}

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

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

備注：若沒有網絡請求或其他業(yè)務邏輯浦马，組件中也可以越過actions时呀，即不寫dispatch，直接編寫commit

5.getters的使用

概念：當state中的數據需要經過加工后再使用時晶默，可以使用getters加工谨娜。

在store.js中追加getters配置

......

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

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

組件中讀取數據：$store.getters.bigSum

6.四個map方法的使用

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

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

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

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

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

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

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

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

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

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

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

7.模塊化+命名空間

目的：讓代碼更好維護庆杜，讓多種數據分類更加明確射众。

修改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數據：

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

開啟命名空間后叨橱，組件中讀取getters數據：

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

開啟命名空間后拓劝，組件中調用dispatch

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

開啟命名空間后雏逾，組件中調用commit

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

路由

理解：一個路由（route）就是一組映射關系（key - value），多個路由需要路由器（router）進行管理郑临。
前端路由：key是路徑栖博，value是組件。

1.基本使用

安裝vue-router厢洞，命令：npm i vue-router
應用插件：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

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

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

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

2.幾個注意點

路由組件通常存放在pages文件夾，一般組件通常存放在components文件夾躺翻。
通過切換丧叽，“隱藏”了的路由組件，默認是被銷毀掉的公你，需要的時候再去掛載踊淳。
每個組件都有自己的$route屬性，里面存儲著自己的路由信息。
整個應用只有一個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
         }
     ]
 }
]

跳轉（要寫完整路徑）：

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

4.路由的query參數

傳遞參數

<!-- 跳轉并攜帶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>

接收參數：
```
$route.query.id
$route.query.title
```

5.命名路由

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

如何使用

給路由命名：

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

簡化跳轉：

<!--簡化前溉躲，需要寫完整的路徑 -->
<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參數

配置路由，聲明接收params參數

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

傳遞參數

<!-- 跳轉并攜帶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配置！

接收參數：
```
$route.params.id
$route.params.title
```

7.路由的props配置

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

{
    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屬性

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

9.編程式路由導航

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

具體編碼：

//$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.緩存路由組件

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

具體編碼：

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

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

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

12.路由守衛(wèi)

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

全局守衛(wèi):

//全局前置守衛(wèi)：初始化時執(zhí)行凭迹、每次路由切換前執(zhí)行
router.beforeEach((to,from,next)=>{
 console.log('beforeEach',to,from)
 if(to.meta.isAuth){ //判斷當前路由是否需要進行權限控制
     if(localStorage.getItem('school') === 'atguigu'){ //權限控制的具體規(guī)則
         next() //放行
     }else{
         alert('暫無權限查看')
         // 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 //修改網頁的title
 }else{
     document.title = 'vue_test'
 }
})

獨享守衛(wèi):

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

組件內守衛(wèi)：

//進入守衛(wèi)：通過路由規(guī)則苦囱，進入該組件時被調用
beforeRouteEnter (to, from, next) {
},
//離開守衛(wèi)：通過路由規(guī)則嗅绸，離開該組件時被調用
beforeRouteLeave (to, from, next) {
}

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

對于一個url來說，什么是hash值撕彤？—— #及其后面的內容就是hash值鱼鸠。
hash值不會包含在 HTTP 請求中，即：hash值不會帶給服務器。
hash模式：
1. 地址中永遠帶著#號蚀狰，不美觀漆弄。
2. 若以后將地址通過第三方手機app分享，若app校驗嚴格造锅，則地址會被標記為不合法。
3. 兼容性較好廉邑。
history模式：
1. 地址干凈哥蔚，美觀。
2. 兼容性和hash模式相比略差蛛蒙。
3. 應用部署上線時需要后端人員支持糙箍，解決刷新頁面服務端404的問題。

?著作權歸作者所有,轉載或內容合作請聯系作者

人面猴
序言：七十年代末牵祟，一起剝皮案震驚了整個濱河市深夯，隨后出現的幾起案子，更是在濱河造成了極大的恐慌诺苹，老刑警劉巖咕晋，帶你破解...
沈念sama閱讀 218,858評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現場離奇詭異收奔，居然都是意外死亡掌呜，警方通過查閱死者的電腦和手機，發(fā)現死者居然都...
沈念sama閱讀 93,372評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門坪哄，熙熙樓的掌柜王于貴愁眉苦臉地迎上來质蕉，“玉大人，你說我怎么就攤上這事翩肌∧０担” “怎么了？”我有些...
開封第一講書人閱讀 165,282評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵念祭，是天一觀的道長兑宇。經常有香客問我，道長棒卷，這世上最難降的妖魔是什么顾孽？我笑而不...
開封第一講書人閱讀 58,842評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮比规，結果婚禮上若厚，老公的妹妹穿的比我還像新娘。我一直安慰自己蜒什，他們只是感情好测秸，可當我...
茶點故事閱讀 67,857評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般霎冯。火紅的嫁衣襯著肌膚如雪铃拇。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,679評論 1贊 305
城市分裂傳說
那天沈撞，我揣著相機與錄音慷荔，去河邊找鬼。笑死缠俺，一個胖子當著我的面吹牛显晶，可吹牛的內容都是我干的。我是一名探鬼主播壹士，決...
沈念sama閱讀 40,406評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼磷雇，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了躏救？” 一聲冷哼從身側響起唯笙，我...
開封第一講書人閱讀 39,311評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎盒使，沒想到半個月后搅裙，有當地人在樹林里發(fā)現了一具尸體塞弊，經...
沈念sama閱讀 45,767評論 1贊 315
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,945評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現自己被綠了隔躲。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片如绸。...
茶點故事閱讀 40,090評論 1贊 350
活死人
序言：一個原本活蹦亂跳的男人離奇死亡藏鹊，死狀恐怖轨帜，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情鞋拟，我是刑警寧澤骂维，帶...
沈念sama閱讀 35,785評論 5贊 346
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站贺纲，受9級特大地震影響航闺，放射性物質發(fā)生泄漏。R本人自食惡果不足惜猴誊，卻給世界環(huán)境...
茶點故事閱讀 41,420評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一潦刃、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧懈叹，春花似錦乖杠、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,988評論 0贊 22
一樁弒父案胧洒，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽畏吓。三九已至，卻和暖如春卫漫，著一層夾襖步出監(jiān)牢的瞬間菲饼，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,101評論 1贊 271
情欲美人皮
我被黑心中介騙來泰國打工列赎，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留宏悦，地道東北人。一個月前我還...
沈念sama閱讀 48,298評論 3贊 372
代替公主和親
正文我出身青樓包吝，卻偏偏與公主長得像肛根，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子漏策，可洞房花燭夜當晚...
茶點故事閱讀 45,033評論 2贊 355

Vue學習進階vue_test

筆記

腳手架文件結構

關于不同版本的Vue

vue.config.js配置文件

ref屬性

props配置項

mixin(混入)

插件

scoped樣式

總結TodoList案例

webStorage

組件的自定義事件

全局事件總線（GlobalEventBus）

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

nextTick

Vue封裝的過度與動畫

vue腳手架配置代理

方法一

方法二

插槽

Vuex

1.概念

2.何時使用？

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

4.基本使用

5.getters的使用

6.四個map方法的使用

7.模塊化+命名空間

路由

1.基本使用

2.幾個注意點

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

4.路由的query參數

5.命名路由

6.路由的params參數

7.路由的props配置

8.<router-link>的replace屬性

9.編程式路由導航

10.緩存路由組件

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

12.路由守衛(wèi)

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

推薦閱讀更多精彩內容

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