vue筆記

筆記

腳手架文件結構

├── 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函數(shù)接收到的createElement函數(shù)去指定具體內(nèi)容联逻。

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配置項

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

mixin(混入)

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

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

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

插件

功能：用于增強Vue
本質：包含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>

總結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)本地存儲機制跪帝。
相關API：
1. xxxxxStorage.setItem('key', 'value');
  該方法接受一個鍵和值作為參數(shù)，會把鍵值對添加到存儲中些阅，如果鍵名存在伞剑，則更新其對應的值。
2. xxxxxStorage.getItem('person');
```
  該方法接受一個鍵名作為參數(shù)市埋，返回鍵名對應的值黎泣。
```
3. xxxxxStorage.removeItem('key');
```
  該方法接受一個鍵名作為參數(shù)，并把該鍵名從存儲中刪除缤谎。
```
4. xxxxxStorage.clear()
```
  該方法會清空存儲中的所有數(shù)據(jù)抒倚。
```
備注：
1. SessionStorage存儲的內(nèi)容會隨著瀏覽器窗口關閉而消失。
2. LocalStorage存儲的內(nèi)容坷澡，需要手動清除才會消失托呕。
3. xxxxxStorage.getItem(xxx)如果xxx對應的value獲取不到，那么getItem的返回值是null频敛。
4. JSON.parse(null)的結果依然是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就是當前應用的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去解綁當前組件所用到的事件创南。

消息訂閱與發(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 更新結束后執(zhí)行其指定的回調(diào)旧噪。
什么時候用：當改變數(shù)據(jù)后吨娜，要基于更新后的新DOM進行某些操作時，要在nextTick所指定的回調(diào)函數(shù)中執(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>插槽默認內(nèi)容...</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">插槽默認內(nèi)容...</slot>
               <slot name="footer">插槽默認內(nèi)容...</slot>
            </div>
        </template>

作用域插槽：

理解：數(shù)據(jù)在組件的自身，但根據(jù)數(shù)據(jù)生成的結構需要組件的使用者來決定庶艾。（games數(shù)據(jù)在Category組件中袁余，但使用數(shù)據(jù)所遍歷出來的結構由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'],
                //數(shù)據(jù)在子組件自身
                data() {
                    return {
                        games:['紅色警戒','穿越火線','勁舞團','超級瑪麗']
                    }
                },
            }
        </script>

Vuex

1.概念

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

2.何時使用述召？

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

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中的數(shù)據(jù)
const mutations = {}
//準備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 = {
    //響應組件中加的動作
 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)絡請求或其他業(yè)務邏輯藤为，組件中也可以越過actions，即不寫dispatch夺刑，直接編寫commit

5.getters的使用

概念：當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.模塊化+命名空間

目的：讓代碼更好維護寞冯，讓多種數(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）就是一組映射關系（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 '../pages/About'
import Home from '../pages/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文件夾奴迅。
通過切換，“隱藏”了的路由組件挺据，默認是被銷毀掉的取具，需要的時候再去掛載。
每個組件都有自己的$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參數(shù)

傳遞參數(shù)

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

接收參數(shù)：
```
$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>

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

<!-- 跳轉并攜帶params參數(shù)，to的字符串寫法 -->
<router-link :to="/home/message/detail/666/你好">跳轉</router-link>
             
<!-- 跳轉并攜帶params參數(shù)绷雏，to的對象寫法 -->
<router-link 
 :to="{
     name:'xiangqing',
     params:{
        id:666,
            title:'你好'
     }
 }"
>跳轉</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屬性

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

9.編程式路由導航

作用：不借助<router-link>實現(xià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() //前進
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)帚桩、組件內(nè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 //修改網(wǎng)頁的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()
 }
}

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

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

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

對于一個url來說儡蔓，什么是hash值郭蕉？—— #及其后面的內(nèi)容就是hash值。
hash值不會包含在 HTTP 請求中喂江，即：hash值不會帶給服務器召锈。
hash模式：
1. 地址中永遠帶著#號，不美觀开呐。
2. 若以后將地址通過第三方手機app分享烟勋，若app校驗嚴格，則地址會被標記為不合法筐付。
3. 兼容性較好卵惦。
history模式：
1. 地址干凈，美觀瓦戚。
2. 兼容性和hash模式相比略差沮尿。
3. 應用部署上線時需要后端人員支持，解決刷新頁面服務端404的問題。
from 張?zhí)煊?/p>

最后編輯于：2022.06.25 21:53:40

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末畜疾，一起剝皮案震驚了整個濱河市赴邻，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌啡捶，老刑警劉巖姥敛，帶你破解...
沈念sama閱讀 206,723評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異瞎暑，居然都是意外死亡彤敛，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,485評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門了赌，熙熙樓的掌柜王于貴愁眉苦臉地迎上來墨榄，“玉大人，你說我怎么就攤上這事勿她“乐龋” “怎么了绿淋？”我有些...
開封第一講書人閱讀 152,998評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵阳谍，是天一觀的道長。經(jīng)常有香客問我顾瞪，道長筒狠，這世上最難降的妖魔是什么猪狈？我笑而不...
開封第一講書人閱讀 55,323評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任箱沦，我火速辦了婚禮辩恼，結果婚禮上，老公的妹妹穿的比我還像新娘谓形。我一直安慰自己灶伊，他們只是感情好，可當我...
茶點故事閱讀 64,355評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布寒跳。她就那樣靜靜地躺著聘萨，像睡著了一般。火紅的嫁衣襯著肌膚如雪童太。梳的紋絲不亂的頭發(fā)上米辐，一...
開封第一講書人閱讀 49,079評論 1贊 285
城市分裂傳說
那天，我揣著相機與錄音书释，去河邊找鬼翘贮。笑死，一個胖子當著我的面吹牛爆惧，可吹牛的內(nèi)容都是我干的狸页。我是一名探鬼主播，決...
沈念sama閱讀 38,389評論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼扯再，長吁一口氣：“原來是場噩夢啊……” “哼芍耘！你這毒婦竟也來了址遇？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 37,019評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤斋竞，失蹤者是張志新（化名）和其女友劉穎倔约，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體坝初，經(jīng)...
沈念sama閱讀 43,519評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡跺株，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,971評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了脖卖。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片乒省。...
茶點故事閱讀 38,100評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖畦木，靈堂內(nèi)的尸體忽然破棺而出袖扛，到底是詐尸還是另有隱情，我是刑警寧澤十籍，帶...
沈念sama閱讀 33,738評論 4贊 324
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布蛆封，位于F島的核電站，受9級特大地震影響勾栗，放射性物質發(fā)生泄漏惨篱。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 39,293評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一围俘、第九天我趴在偏房一處隱蔽的房頂上張望砸讳。院中可真熱鬧，春花似錦界牡、人聲如沸簿寂。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,289評論 0贊 19
一樁弒父案宿亡，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽常遂。三九已至，卻和暖如春挽荠，著一層夾襖步出監(jiān)牢的瞬間克胳，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,517評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工圈匆，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留漠另，地道東北人。一個月前我還...
沈念sama閱讀 45,547評論 2贊 354
代替公主和親
正文我出身青樓臭脓，卻偏偏與公主長得像酗钞，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 42,834評論 2贊 345

vue筆記

筆記

腳手架文件結構

關于不同版本的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參數(shù)

5.命名路由

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

7.路由的props配置

8.<router-link>的replace屬性

9.編程式路由導航

10.緩存路由組件

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

12.路由守衛(wèi)

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

推薦閱讀更多精彩內(nèi)容

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