vue2

筆記

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

├── node_modules 
├── public
│   ├── favicon.ico: 頁(yè)簽圖標(biāo)
│   └── index.html: 主頁(yè)面
├── 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

  1. vue.js與vue.runtime.xxx.js的區(qū)別:
    1. vue.js是完整版的Vue,包含:核心功能 + 模板解析器谊娇。
    2. vue.runtime.xxx.js是運(yùn)行版的Vue,只包含:核心功能罗晕;沒(méi)有模板解析器济欢。
  2. 因?yàn)関ue.runtime.xxx.js沒(méi)有模板解析器,所以不能使用template這個(gè)配置項(xiàng)小渊,需要使用render函數(shù)接收到的createElement函數(shù)去指定具體內(nèi)容法褥。

vue.config.js配置文件

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

ref屬性

  1. 被用來(lái)給元素或子組件注冊(cè)引用信息(id的替代者)
  2. 應(yīng)用在html標(biāo)簽上獲取的是真實(shí)DOM元素半等,應(yīng)用在組件標(biāo)簽上是組件實(shí)例對(duì)象(vc)
  3. 使用方式:
    1. 打標(biāo)識(shí):<h1 ref="xxx">.....</h1><School ref="xxx"></School>
    2. 獲取:this.$refs.xxx

props配置項(xiàng)

  1. 功能:讓組件接收外部傳過(guò)來(lái)的數(shù)據(jù)

  2. 傳遞數(shù)據(jù):<Demo name="xxx"/>

  3. 接收數(shù)據(jù):

    1. 第一種方式(只接收):props:['name']

    2. 第二種方式(限制類(lèi)型):props:{name:String}

    3. 第三種方式(限制類(lèi)型呐萨、限制必要性杀饵、指定默認(rèn)值):

      props:{
          name:{
          type:String, //類(lèi)型
          required:true, //必要性
          default:'老王' //默認(rèn)值
          }
      }
      

    備注:props是只讀的,Vue底層會(huì)監(jiān)測(cè)你對(duì)props的修改谬擦,如果進(jìn)行了修改切距,就會(huì)發(fā)出警告,若業(yè)務(wù)需求確實(shí)需要修改怯屉,那么請(qǐng)復(fù)制props的內(nèi)容到data中一份蔚舀,然后去修改data中的數(shù)據(jù)。

mixin(混入)

  1. 功能:可以把多個(gè)組件共用的配置提取成一個(gè)混入對(duì)象

  2. 使用方式:

    第一步定義混合:

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

    第二步使用混入:

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

插件

  1. 功能:用于增強(qiáng)Vue

  2. 本質(zhì):包含install方法的一個(gè)對(duì)象锨络,install的第一個(gè)參數(shù)是Vue赌躺,第二個(gè)以后的參數(shù)是插件使用者傳遞的數(shù)據(jù)。

  3. 定義插件:

    對(duì)象.install = function (Vue, options) {
        // 1. 添加全局過(guò)濾器
        Vue.filter(....)
    
        // 2. 添加全局指令
        Vue.directive(....)
    
        // 3. 配置全局混入(合)
        Vue.mixin(....)
    
        // 4. 添加實(shí)例方法
        Vue.prototype.$myMethod = function () {...}
        Vue.prototype.$myProperty = xxxx
    }
    
  4. 使用插件:Vue.use()

scoped樣式

  1. 作用:讓樣式在局部生效羡儿,防止沖突礼患。
  2. 寫(xiě)法:<style scoped>

總結(jié)TodoList案例

  1. 組件化編碼流程:

     (1).拆分靜態(tài)組件:組件要按照功能點(diǎn)拆分,命名不要與html元素沖突掠归。
    
     (2).實(shí)現(xiàn)動(dòng)態(tài)組件:考慮好數(shù)據(jù)的存放位置缅叠,數(shù)據(jù)是一個(gè)組件在用,還是一些組件在用:
    
             1).一個(gè)組件在用:放在組件自身即可虏冻。
    
             2). 一些組件在用:放在他們共同的父組件上(<span style="color:red">狀態(tài)提升</span>)肤粱。
    
     (3).實(shí)現(xiàn)交互:從綁定事件開(kāi)始。
    
  2. props適用于:

     (1).父組件 ==> 子組件 通信
    
     (2).子組件 ==> 父組件 通信(要求父先給子一個(gè)函數(shù))
    
  3. 使用v-model時(shí)要切記:v-model綁定的值不能是props傳過(guò)來(lái)的值厨相,因?yàn)閜rops是不可以修改的领曼!

  4. props傳過(guò)來(lái)的若是對(duì)象類(lèi)型的值鸥鹉,修改對(duì)象中的屬性時(shí)Vue不會(huì)報(bào)錯(cuò),但不推薦這樣做庶骄。

webStorage

  1. 存儲(chǔ)內(nèi)容大小一般支持5MB左右(不同瀏覽器可能還不一樣)

  2. 瀏覽器端通過(guò) Window.sessionStorage 和 Window.localStorage 屬性來(lái)實(shí)現(xiàn)本地存儲(chǔ)機(jī)制毁渗。

  3. 相關(guān)API:

    1. xxxxxStorage.setItem('key', 'value');
      該方法接受一個(gè)鍵和值作為參數(shù),會(huì)把鍵值對(duì)添加到存儲(chǔ)中单刁,如果鍵名存在灸异,則更新其對(duì)應(yīng)的值。

    2. xxxxxStorage.getItem('person');

           該方法接受一個(gè)鍵名作為參數(shù)羔飞,返回鍵名對(duì)應(yīng)的值肺樟。
      
    3. xxxxxStorage.removeItem('key');

           該方法接受一個(gè)鍵名作為參數(shù),并把該鍵名從存儲(chǔ)中刪除褥傍。
      
    4. xxxxxStorage.clear()

           該方法會(huì)清空存儲(chǔ)中的所有數(shù)據(jù)儡嘶。
      
  4. 備注:

    1. SessionStorage存儲(chǔ)的內(nèi)容會(huì)隨著瀏覽器窗口關(guān)閉而消失。
    2. LocalStorage存儲(chǔ)的內(nèi)容恍风,需要手動(dòng)清除才會(huì)消失。
    3. xxxxxStorage.getItem(xxx)如果xxx對(duì)應(yīng)的value獲取不到誓篱,那么getItem的返回值是null朋贬。
    4. JSON.parse(null)的結(jié)果依然是null。

組件的自定義事件

  1. 一種組件間通信的方式窜骄,適用于:<strong style="color:red">子組件 ===> 父組件</strong>

  2. 使用場(chǎng)景:A是父組件锦募,B是子組件,B想給A傳數(shù)據(jù)邻遏,那么就要在A中給B綁定自定義事件(<span style="color:red">事件的回調(diào)在A中</span>)糠亩。

  3. 綁定自定義事件:

    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方法糊饱。

  4. 觸發(fā)自定義事件:this.$emit('atguigu',數(shù)據(jù))

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

  6. 組件上也可以綁定原生DOM事件垂寥,需要使用native修飾符。

  7. 注意:通過(guò)this.$refs.xxx.$on('atguigu',回調(diào))綁定自定義事件時(shí)另锋,回調(diào)<span style="color:red">要么配置在methods中</span>滞项,<span style="color:red">要么用箭頭函數(shù)</span>,否則this指向會(huì)出問(wèn)題夭坪!

全局事件總線(xiàn)(GlobalEventBus)

  1. 一種組件間通信的方式文判,適用于<span style="color:red">任意組件間通信</span>。

  2. 安裝全局事件總線(xiàn):

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

    1. 接收數(shù)據(jù):A組件想接收數(shù)據(jù)戏仓,則在A組件中給$bus綁定自定義事件疚宇,事件的<span style="color:red">回調(diào)留在A組件自身。</span>

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.$bus.$on('xxxx',this.demo)
      }
      
    2. 提供數(shù)據(jù):this.$bus.$emit('xxxx',數(shù)據(jù))

  4. 最好在beforeDestroy鉤子中柜去,用$off去解綁<span style="color:red">當(dāng)前組件所用到的</span>事件灰嫉。

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

  1. 一種組件間通信的方式,適用于<span style="color:red">任意組件間通信</span>嗓奢。

  2. 使用步驟:

    1. 安裝pubsub:npm i pubsub-js

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

    3. 接收數(shù)據(jù):A組件想接收數(shù)據(jù)讼撒,則在A組件中訂閱消息,訂閱的<span style="color:red">回調(diào)留在A組件自身股耽。</span>

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.pid = pubsub.subscribe('xxx',this.demo) //訂閱消息
      }
      
    4. 提供數(shù)據(jù):pubsub.publish('xxx',數(shù)據(jù))

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

nextTick

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

Vue封裝的過(guò)度與動(dòng)畫(huà)

  1. 作用:在插入册赛、更新或移除 DOM元素時(shí),在合適的時(shí)候給元素添加樣式類(lèi)名震嫉。

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

  3. 寫(xiě)法:

    1. 準(zhǔn)備好樣式:

      • 元素進(jìn)入的樣式:
        1. v-enter:進(jìn)入的起點(diǎn)
        2. v-enter-active:進(jìn)入過(guò)程中
        3. v-enter-to:進(jìn)入的終點(diǎn)
      • 元素離開(kāi)的樣式:
        1. v-leave:離開(kāi)的起點(diǎn)
        2. v-leave-active:離開(kāi)過(guò)程中
        3. v-leave-to:離開(kāi)的終點(diǎn)
    2. 使用<transition>包裹要過(guò)度的元素森瘪,并配置name屬性:

      <transition name="hello">
        <h1 v-show="isShow">你好啊票堵!</h1>
      </transition>
      
    3. 備注:若有多個(gè)元素需要過(guò)度扼睬,則需要使用:<transition-group>,且每個(gè)元素都要指定key值悴势。

vue腳手架配置代理

方法一

在vue.config.js中添加如下配置:
devServer:{
  proxy:"http://localhost:5000"
}

說(shuō)明:

  1. 優(yōu)點(diǎn):配置簡(jiǎn)單窗宇,請(qǐng)求資源時(shí)直接發(fā)給前端(8080)即可。
  2. 缺點(diǎn):不能配置多個(gè)代理特纤,不能靈活的控制請(qǐng)求是否走代理军俊。
  3. 工作方式:若按照上述配置代理,當(dāng)請(qǐng)求了前端不存在的資源時(shí)叫潦,那么該請(qǐng)求會(huì)轉(zhuǎn)發(fā)給服務(wù)器 (優(yōu)先匹配前端資源)

方法二

編寫(xiě)vue.config.js配置具體代理規(guī)則:
module.exports = {
    devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'開(kāi)頭的請(qǐng)求路徑
        target: 'http://localhost:5000',// 代理目標(biāo)的基礎(chǔ)路徑
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'開(kāi)頭的請(qǐng)求路徑
        target: 'http://localhost:5001',// 代理目標(biāo)的基礎(chǔ)路徑
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin設(shè)置為true時(shí)蝇完,服務(wù)器收到的請(qǐng)求頭中的host為:localhost:5000
   changeOrigin設(shè)置為false時(shí),服務(wù)器收到的請(qǐng)求頭中的host為:localhost:8080
   changeOrigin默認(rèn)值為true
*/

說(shuō)明:

  1. 優(yōu)點(diǎn):可以配置多個(gè)代理矗蕊,且可以靈活的控制請(qǐng)求是否走代理短蜕。
  2. 缺點(diǎn):配置略微繁瑣,請(qǐng)求資源時(shí)必須加前綴傻咖。

插槽

  1. 作用:讓父組件可以向子組件指定位置插入html結(jié)構(gòu)朋魔,也是一種組件間通信的方式,適用于 <strong style="color:red">父組件 ===> 子組件</strong> 卿操。

  2. 分類(lèi):默認(rèn)插槽警检、具名插槽孙援、作用域插槽

  3. 使用方式:

    1. 默認(rèn)插槽:

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

      父組件中:
              <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>
      
    3. 作用域插槽:

      1. 理解:<span style="color:red">數(shù)據(jù)在組件的自身,但根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者來(lái)決定扇雕。</span>(games數(shù)據(jù)在Category組件中拓售,但使用數(shù)據(jù)所遍歷出來(lái)的結(jié)構(gòu)由App組件決定)

      2. 具體編碼:

        父組件中:
               <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:['紅色警戒','穿越火線(xiàn)','勁舞團(tuán)','超級(jí)瑪麗']
                            }
                        },
                    }
                </script>
        
    
    
image.png

Vuex

1.概念

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

2.何時(shí)使用哨苛?

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

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

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

    //引入Vue核心庫(kù)
    import Vue from 'vue'
    //引入Vuex
    import Vuex from 'vuex'
    //應(yīng)用Vuex插件
    Vue.use(Vuex)
    
    //準(zhǔn)備actions對(duì)象——響應(yīng)組件中用戶(hù)的動(dòng)作
    const actions = {}
    //準(zhǔn)備mutations對(duì)象——修改state中的數(shù)據(jù)
    const mutations = {}
    //準(zhǔn)備state對(duì)象——保存具體的數(shù)據(jù)
    const state = {}
    
    //創(chuàng)建并暴露store
    export default new Vuex.Store({
     actions,
     mutations,
     state
    })
    
  2. main.js中創(chuàng)建vm時(shí)傳入store配置項(xiàng)

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

4.基本使用

  1. 初始化數(shù)據(jù)鸽凶、配置actions、配置mutations建峭,操作文件store.js

    //引入Vue核心庫(kù)
    import Vue from 'vue'
    //引入Vuex
    import Vuex from 'vuex'
    //引用Vuex
    Vue.use(Vuex)
    
    const actions = {
        //響應(yīng)組件中加的動(dò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,
    })
    
  2. 組件中讀取vuex中的數(shù)據(jù):$store.state.sum

  3. 組件中修改vuex中的數(shù)據(jù):$store.dispatch('action中的方法名',數(shù)據(jù))$store.commit('mutations中的方法名',數(shù)據(jù))

    備注:若沒(méi)有網(wǎng)絡(luò)請(qǐng)求或其他業(yè)務(wù)邏輯玻侥,組件中也可以越過(guò)actions,即不寫(xiě)dispatch亿蒸,直接編寫(xiě)commit

5.getters的使用

  1. 概念:當(dāng)state中的數(shù)據(jù)需要經(jīng)過(guò)加工后再使用時(shí)凑兰,可以使用getters加工。

  2. store.js中追加getters配置

    ......
    
    const getters = {
     bigSum(state){
         return state.sum * 10
     }
    }
    
    //創(chuàng)建并暴露store
    export default new Vuex.Store({
     ......
     getters
    })
    
  3. 組件中讀取數(shù)據(jù):$store.getters.bigSum

6.四個(gè)map方法的使用

  1. <strong>mapState方法:</strong>用于幫助我們映射state中的數(shù)據(jù)為計(jì)算屬性

    computed: {
        //借助mapState生成計(jì)算屬性:sum边锁、school票摇、subject(對(duì)象寫(xiě)法)
         ...mapState({sum:'sum',school:'school',subject:'subject'}),
             
        //借助mapState生成計(jì)算屬性:sum、school砚蓬、subject(數(shù)組寫(xiě)法)
        ...mapState(['sum','school','subject']),
    },
    
  2. <strong>mapGetters方法:</strong>用于幫助我們映射getters中的數(shù)據(jù)為計(jì)算屬性

    computed: {
        //借助mapGetters生成計(jì)算屬性:bigSum(對(duì)象寫(xiě)法)
        ...mapGetters({bigSum:'bigSum'}),
    
        //借助mapGetters生成計(jì)算屬性:bigSum(數(shù)組寫(xiě)法)
        ...mapGetters(['bigSum'])
    },
    
  3. <strong>mapActions方法:</strong>用于幫助我們生成與actions對(duì)話(huà)的方法,即:包含$store.dispatch(xxx)的函數(shù)

    methods:{
        //靠mapActions生成:incrementOdd盆色、incrementWait(對(duì)象形式)
        ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    
        //靠mapActions生成:incrementOdd灰蛙、incrementWait(數(shù)組形式)
        ...mapActions(['jiaOdd','jiaWait'])
    }
    
  4. <strong>mapMutations方法:</strong>用于幫助我們生成與mutations對(duì)話(huà)的方法,即:包含$store.commit(xxx)的函數(shù)

    methods:{
        //靠mapActions生成:increment隔躲、decrement(對(duì)象形式)
        ...mapMutations({increment:'JIA',decrement:'JIAN'}),
        
        //靠mapMutations生成:JIA摩梧、JIAN(對(duì)象形式)
        ...mapMutations(['JIA','JIAN']),
    }
    

備注:mapActions與mapMutations使用時(shí),若需要傳遞參數(shù)需要:在模板中綁定事件時(shí)傳遞好參數(shù)宣旱,否則參數(shù)是事件對(duì)象仅父。

7.模塊化+命名空間

  1. 目的:讓代碼更好維護(hù),讓多種數(shù)據(jù)分類(lèi)更加明確浑吟。

  2. 修改store.js

    const countAbout = {
      namespaced:true,//開(kāi)啟命名空間
      state:{x:1},
      mutations: { ... },
      actions: { ... },
      getters: {
        bigSum(state){
           return state.sum * 10
        }
      }
    }
    
    const personAbout = {
      namespaced:true,//開(kāi)啟命名空間
      state:{ ... },
      mutations: { ... },
      actions: { ... }
    }
    
    const store = new Vuex.Store({
      modules: {
        countAbout,
        personAbout
      }
    })
    
  3. 開(kāi)啟命名空間后笙纤,組件中讀取state數(shù)據(jù):

    //方式一:自己直接讀取
    this.$store.state.personAbout.list
    //方式二:借助mapState讀取:
    ...mapState('countAbout',['sum','school','subject']),
    
  4. 開(kāi)啟命名空間后组力,組件中讀取getters數(shù)據(jù):

    //方式一:自己直接讀取
    this.$store.getters['personAbout/firstPersonName']
    //方式二:借助mapGetters讀仁∪荨:
    ...mapGetters('countAbout',['bigSum'])
    
  5. 開(kāi)啟命名空間后,組件中調(diào)用dispatch

    //方式一:自己直接dispatch
    this.$store.dispatch('personAbout/addPersonWang',person)
    //方式二:借助mapActions:
    ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    
  6. 開(kāi)啟命名空間后燎字,組件中調(diào)用commit

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

路由

  1. 理解: 一個(gè)路由(route)就是一組映射關(guān)系(key - value)腥椒,多個(gè)路由需要路由器(router)進(jìn)行管理阿宅。
  2. 前端路由:key是路徑,value是組件笼蛛。

1.基本使用

  1. 安裝vue-router洒放,命令:npm i vue-router

  2. 應(yīng)用插件:Vue.use(VueRouter)

  3. 編寫(xiě)router配置項(xiàng):

    //引入VueRouter
    import VueRouter from 'vue-router'
    //引入Luyou 組件
    import About from '../components/About'
    import Home from '../components/Home'
    
    //創(chuàng)建router實(shí)例對(duì)象,去管理一組一組的路由規(guī)則
    const router = new VueRouter({
     routes:[
         {
             path:'/about',
             component:About
         },
         {
             path:'/home',
             component:Home
         }
     ]
    })
    
    //暴露router
    export default router
    
  4. 實(shí)現(xiàn)切換(active-class可配置高亮樣式)

    <router-link active-class="active" to="/about">About</router-link>
    
  5. 指定展示位置

    <router-view></router-view>
    

2.幾個(gè)注意點(diǎn)

  1. 路由組件通常存放在pages文件夾滨砍,一般組件通常存放在components文件夾往湿。
  2. 通過(guò)切換,“隱藏”了的路由組件惨好,默認(rèn)是被銷(xiāo)毀掉的煌茴,需要的時(shí)候再去掛載。
  3. 每個(gè)組件都有自己的$route屬性日川,里面存儲(chǔ)著自己的路由信息蔓腐。
  4. 整個(gè)應(yīng)用只有一個(gè)router,可以通過(guò)組件的$router屬性獲取到龄句。

3.多級(jí)路由(多級(jí)路由)

  1. 配置路由規(guī)則回论,使用children配置項(xiàng):

    routes:[
     {
         path:'/about',
         component:About,
     },
     {
         path:'/home',
         component:Home,
         children:[ //通過(guò)children配置子級(jí)路由
             {
                 path:'news', //此處一定不要寫(xiě):/news
                 component:News
             },
             {
                 path:'message',//此處一定不要寫(xiě):/message
                 component:Message
             }
         ]
     }
    ]
    
  2. 跳轉(zhuǎn)(要寫(xiě)完整路徑):

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

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

  1. 傳遞參數(shù)

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

    $route.query.id
    $route.query.title
    

5.命名路由

  1. 作用:可以簡(jiǎn)化路由的跳轉(zhuǎn)傀蓉。

  2. 如何使用

    1. 給路由命名:

      {
        path:'/demo',
        component:Demo,
        children:[
            {
                path:'test',
                component:Test,
                children:[
                    {
                            name:'hello' //給路由命名
                        path:'welcome',
                        component:Hello,
                    }
                ]
            }
        ]
      }
      
    2. 簡(jiǎn)化跳轉(zhuǎn):

      <!--簡(jiǎn)化前,需要寫(xiě)完整的路徑 -->
      <router-link to="/demo/test/welcome">跳轉(zhuǎn)</router-link>
      
      <!--簡(jiǎn)化后职抡,直接通過(guò)名字跳轉(zhuǎn) -->
      <router-link :to="{name:'hello'}">跳轉(zhuǎn)</router-link>
      
      <!--簡(jiǎn)化寫(xiě)法配合傳遞參數(shù) -->
      <router-link 
        :to="{
            name:'hello',
            query:{
               id:666,
                  title:'你好'
            }
        }"
      >跳轉(zhuǎn)</router-link>
      

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

  1. 配置路由葬燎,聲明接收params參數(shù)

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

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

    特別注意:路由攜帶params參數(shù)時(shí)谱净,若使用to的對(duì)象寫(xiě)法,則不能使用path配置項(xiàng)擅威,必須使用name配置壕探!

  3. 接收參數(shù):

    $route.params.id
    $route.params.title
    

7.路由的props配置

作用:讓路由組件更方便的收到參數(shù)
{
    name:'xiangqing',
    path:'detail/:id',
    component:Detail,

    //第一種寫(xiě)法:props值為對(duì)象,該對(duì)象中所有的key-value的組合最終都會(huì)通過(guò)props傳給Detail組件
    // props:{a:900}

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

8.<router-link>的replace屬性

  1. 作用:控制路由跳轉(zhuǎn)時(shí)操作瀏覽器歷史記錄的模式
  2. 瀏覽器的歷史記錄有兩種寫(xiě)入方式:分別為pushreplace厉熟,push是追加歷史記錄导盅,replace是替換當(dāng)前記錄。路由跳轉(zhuǎn)時(shí)候默認(rèn)為push
  3. 如何開(kāi)啟replace模式:<router-link replace .......>News</router-link>

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

  1. 作用:不借助<router-link>實(shí)現(xiàn)路由跳轉(zhuǎn)庆猫,讓路由跳轉(zhuǎn)更加靈活

  2. 具體編碼:

    //$router的兩個(gè)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.緩存路由組件

  1. 作用:讓不展示的路由組件保持掛載认轨,不被銷(xiāo)毀。

  2. 具體編碼:

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

11.兩個(gè)新的生命周期鉤子

  1. 作用:路由組件所獨(dú)有的兩個(gè)鉤子月培,用于捕獲路由組件的激活狀態(tài)嘁字。
  2. 具體名字:
    1. activated路由組件被激活時(shí)觸發(fā)恩急。
    2. deactivated路由組件失活時(shí)觸發(fā)。

12.路由守衛(wèi)

  1. 作用:對(duì)路由進(jìn)行權(quán)限控制

  2. 分類(lèi):全局守衛(wèi)纪蜒、獨(dú)享守衛(wèi)衷恭、組件內(nèi)守衛(wèi)

  3. 全局守衛(wèi):

    //全局前置守衛(wèi):初始化時(shí)執(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('暫無(wú)權(quán)限查看')
             // next({name:'guanyu'})
         }
     }else{
         next() //放行
     }
    })
    
    //全局后置守衛(wèi):初始化時(shí)執(zhí)行纯续、每次路由切換后執(zhí)行
    router.afterEach((to,from)=>{
     console.log('afterEach',to,from)
     if(to.meta.title){ 
         document.title = to.meta.title //修改網(wǎng)頁(yè)的title
     }else{
         document.title = 'vue_test'
     }
    })
    
  4. 獨(dú)享守衛(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('暫無(wú)權(quán)限查看')
             // next({name:'guanyu'})
         }
     }else{
         next()
     }
    }
    
  5. 組件內(nèi)守衛(wèi):

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

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

  1. 對(duì)于一個(gè)url來(lái)說(shuō)猬错,什么是hash值窗看?—— #及其后面的內(nèi)容就是hash值。
  2. hash值不會(huì)包含在 HTTP 請(qǐng)求中倦炒,即:hash值不會(huì)帶給服務(wù)器显沈。
  3. hash模式:
    1. 地址中永遠(yuǎn)帶著#號(hào),不美觀 逢唤。
    2. 若以后將地址通過(guò)第三方手機(jī)app分享拉讯,若app校驗(yàn)嚴(yán)格,則地址會(huì)被標(biāo)記為不合法鳖藕。
    3. 兼容性較好魔慷。
  4. history模式:
    1. 地址干凈,美觀 著恩。
    2. 兼容性和hash模式相比略差院尔。
    3. 應(yīng)用部署上線(xiàn)時(shí)需要后端人員支持,解決刷新頁(yè)面服務(wù)端404的問(wèn)題喉誊。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末召边,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子裹驰,更是在濱河造成了極大的恐慌,老刑警劉巖片挂,帶你破解...
    沈念sama閱讀 216,402評(píng)論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件幻林,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡音念,警方通過(guò)查閱死者的電腦和手機(jī)沪饺,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)闷愤,“玉大人整葡,你說(shuō)我怎么就攤上這事〖テ辏” “怎么了遭居?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,483評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵啼器,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我俱萍,道長(zhǎng)端壳,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,165評(píng)論 1 292
  • 正文 為了忘掉前任枪蘑,我火速辦了婚禮损谦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘岳颇。我一直安慰自己照捡,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,176評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布话侧。 她就那樣靜靜地躺著栗精,像睡著了一般。 火紅的嫁衣襯著肌膚如雪掂摔。 梳的紋絲不亂的頭發(fā)上术羔,一...
    開(kāi)封第一講書(shū)人閱讀 51,146評(píng)論 1 297
  • 那天,我揣著相機(jī)與錄音乙漓,去河邊找鬼级历。 笑死初狰,一個(gè)胖子當(dāng)著我的面吹牛逼肯,可吹牛的內(nèi)容都是我干的杆煞。 我是一名探鬼主播八拱,決...
    沈念sama閱讀 40,032評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼泛啸,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼房维!你這毒婦竟也來(lái)了占贫?” 一聲冷哼從身側(cè)響起娘扩,我...
    開(kāi)封第一講書(shū)人閱讀 38,896評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤同诫,失蹤者是張志新(化名)和其女友劉穎粤策,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體误窖,經(jīng)...
    沈念sama閱讀 45,311評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡叮盘,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,536評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了霹俺。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片柔吼。...
    茶點(diǎn)故事閱讀 39,696評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖丙唧,靈堂內(nèi)的尸體忽然破棺而出愈魏,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評(píng)論 5 343
  • 正文 年R本政府宣布培漏,位于F島的核電站溪厘,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏北苟。R本人自食惡果不足惜桩匪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,008評(píng)論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望友鼻。 院中可真熱鬧傻昙,春花似錦、人聲如沸彩扔。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)虫碉。三九已至贾惦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間敦捧,已是汗流浹背须板。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,815評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留兢卵,地道東北人习瑰。 一個(gè)月前我還...
    沈念sama閱讀 47,698評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像秽荤,于是被迫代替她去往敵國(guó)和親甜奄。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,592評(píng)論 2 353

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

  • 16宿命:用概率思維提高你的勝算 以前的我是風(fēng)險(xiǎn)厭惡者窃款,不喜歡去冒險(xiǎn)课兄,但是人生放棄了冒險(xiǎn),也就放棄了無(wú)數(shù)的可能晨继。 ...
    yichen大刀閱讀 6,046評(píng)論 0 4
  • 公元:2019年11月28日19時(shí)42分農(nóng)歷:二零一九年 十一月 初三日 戌時(shí)干支:己亥乙亥己巳甲戌當(dāng)月節(jié)氣:立冬...
    石放閱讀 6,877評(píng)論 0 2
  • 今天上午陪老媽看病烟阐,下午健身房跑步,晚上想想今天還沒(méi)有斷舍離紊扬,馬上做曲饱,衣架和旁邊的的布衣架,一看亂亂珠月,又想想自己是...
    影子3623253閱讀 2,912評(píng)論 1 8