?? 腳手架文件結(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

1. vue.js與vue.runtime.xxx.js的區(qū)別：

• vue.js是完整版的Vue，包含：核心功能 + 模板解析器。

• vue.runtime.xxx.js是運(yùn)行版的Vue，只包含：核心功能；沒有模板解析器。

2. 因?yàn)関ue.runtime.xxx.js沒有模板解析器，所以不能使用template這個(gè)配置項(xiàng)，需要使用render函數(shù)接收到的createElement函數(shù)去指定具體內(nèi)容。

?? vue.config.js配置文件

使用vue inspect > output.js可以查看到Vue腳手架的默認(rèn)配置。

使用vue.config.js可以對(duì)腳手架進(jìn)行個(gè)性化定制，詳情見：https://cli.vuejs.org/zh

?? ref屬性

1. 被用來給元素或子組件注冊(cè)引用信息（id的替代者）
2. 應(yīng)用在html標(biāo)簽上獲取的是真實(shí)DOM元素，應(yīng)用在組件標(biāo)簽上是組件實(shí)例對(duì)象（vc）
3. 使用方式：

•   打標(biāo)識(shí)：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
  

•   獲?。簍his.$refs.xxx
  

?? props配置項(xiàng)

1.  功能：讓組件接收外部傳過來的數(shù)據(jù)
   

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

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

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

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

•   第三種方式（限制類型、限制必要性、指定默認(rèn)值）：
    props:{
    	name:{
     	type:String, //類型
     	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. 添加全局過濾器
    	 Vue.filter(....)
    	 // 2. 添加全局指令
    	 Vue.directive(....)
    	 // 3. 配置全局混入(合)
    	 Vue.mixin(....)
    	 // 4. 添加實(shí)例方法
    	 Vue.prototype.$myMethod = function () {...}
    	 Vue.prototype.$myProperty = xxxx
     }
   

"""
4. 使用插件：Vue.use()

?? scoped樣式

•   作用：讓樣式在局部生效，防止沖突。
  

•   寫法：<style scoped>
  

?? 總結(jié)TodoList案例

組件化編碼流程：

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

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

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

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

? (3).實(shí)現(xiàn)交互：從綁定事件開始。

props適用于：

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

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

使用v-model時(shí)要切記：v-model綁定的值不能是props傳過來的

值，因?yàn)閜rops是不可以修改的！

props傳過來的若是對(duì)象類型的值，修改對(duì)象中的屬性時(shí)Vue不會(huì)

報(bào)錯(cuò)，但不推薦這樣做。

?? webStorage

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

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

3. 相關(guān)API：

    xxxxxStorage.setItem('key', 'value');
    該方法接受一個(gè)鍵和值作為參數(shù)，會(huì)把鍵值對(duì)添加到存儲(chǔ)中，如果鍵名存在，則更新其對(duì)應(yīng)的值。
    xxxxxStorage.getItem('person');
   
    ? 該方法接受一個(gè)鍵名作為參數(shù)，返回鍵名對(duì)應(yīng)的值。
   
    xxxxxStorage.removeItem('key');
   
    ? 該方法接受一個(gè)鍵名作為參數(shù)，并把該鍵名從存儲(chǔ)中刪除。
   
    xxxxxStorage.clear()
   
    ? 該方法會(huì)清空存儲(chǔ)中的所有數(shù)據(jù)。
   

備注：

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

?? 組件的自定義事件

• 一種組件間通信的方式，適用于：子組件 ===> 父組件

• 使用場(chǎng)景：A是父組件，B是子組件，B想給A傳數(shù)據(jù)，那么就要在A中給B綁定自定義事件（事件的回調(diào)在A中）。

• 綁定自定義事件：

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

"""

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

"""
若想讓自定義事件只能觸發(fā)一次，可以使用once修飾符，或$once方法。

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

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

組件上也可以綁定原生DOM事件，需要使用native修飾符。

注意：通過this.$refs.xxx.$on('atguigu',回調(diào))綁定自定義事件時(shí)，回調(diào)<span style="color:red">要么配置在methods中</span>，<span style="color:red">要么用箭頭函數(shù)</span>，否則this指向會(huì)出問題！

?? 全局事件總線（GlobalEventBus）

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

• 安裝全局事件總線：
  """

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

"""
使用事件總線：

接收數(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)
}

"""
提供數(shù)據(jù)：this.\(bus.\)emit('xxxx',數(shù)據(jù))

最好在beforeDestroy鉤子中，用$off去解綁當(dāng)前組件所用到的事件。

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

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

使用步驟：

安裝pubsub：npm i pubsub-js

引入: import pubsub from 'pubsub-js'

接收數(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) //訂閱消息
}

"""

提供數(shù)據(jù)：pubsub.publish('xxx',數(shù)據(jù))

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

?? nextTick

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

?? Vue封裝的過度與動(dòng)畫

作用：在插入、更新或移除 DOM元素時(shí)，在合適的時(shí)候給元素添加樣式類名。

圖示：<img src="" style="width:60%" />

寫法：

準(zhǔn)備好樣式：

元素進(jìn)入的樣式：
v-enter：進(jìn)入的起點(diǎn)
v-enter-active：進(jìn)入過程中
v-enter-to：進(jìn)入的終點(diǎn)
元素離開的樣式：
v-leave：離開的起點(diǎn)
v-leave-active：離開過程中
v-leave-to：離開的終點(diǎn)
使用<transition>包裹要過度的元素，并配置name屬性：

"""

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

"""

備注：若有多個(gè)元素需要過度，則需要使用：，且每個(gè)元素都要指定key值。

?? vue腳手架配置代理

方法一

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

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

"""
說明：

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

方法二

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

module.exports = {
	devServer: {
	  proxy: {
	  '/api1': {// 匹配所有以 '/api1'開頭的請(qǐng)求路徑
		target: 'http://localhost:5000',// 代理目標(biāo)的基礎(chǔ)路徑
		changeOrigin: true,
		pathRewrite: {'^/api1': ''}
	  },
	  '/api2': {// 匹配所有以 '/api2'開頭的請(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
*/

"""

說明：

• 優(yōu)點(diǎn)：可以配置多個(gè)代理，且可以靈活的控制請(qǐng)求是否走代理。
• 缺點(diǎn)：配置略微繁瑣，請(qǐng)求資源時(shí)必須加前綴。

?? 插槽

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

分類：默認(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>
  

"""

作用域插槽：

理解：<span style="color:red">數(shù)據(jù)在組件的自身，但根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者來決定。</span>（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:['紅色警戒','穿越火線','勁舞團(tuán)','超級(jí)瑪麗']
					}
				},
			}
		</script>

"""

??Vuex

1.概念

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

2.何時(shí)使用？

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

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對(duì)象——響應(yīng)組件中用戶的動(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
	})
"""
在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.基本使用
初始化數(shù)據(jù)、配置actions、配置mutations，操作文件store.js
"""

//引入Vue核心庫
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,
})

"""
組件中讀取vuex中的數(shù)據(jù)：$store.state.sum

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

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

5.getters的使用

概念：當(dāng)state中的數(shù)據(jù)需要經(jīng)過加工后再使用時(shí)，可以使用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.四個(gè)map方法的使用
	<strong>mapState方法：</strong>用于幫助我們映射state中的數(shù)據(jù)為計(jì)算屬性
"""

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

"""

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

"""

computed: {
	//借助mapGetters生成計(jì)算屬性：bigSum（對(duì)象寫法）
	...mapGetters({bigSum:'bigSum'}),
	//借助mapGetters生成計(jì)算屬性：bigSum（數(shù)組寫法）
	...mapGetters(['bigSum'])
},

"""

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

"""

methods:{
	//靠mapActions生成：incrementOdd、incrementWait（對(duì)象形式）
	...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
	//靠mapActions生成：incrementOdd、incrementWait（數(shù)組形式）
	...mapActions(['jiaOdd','jiaWait'])
}

"""

<strong>mapMutations方法：</strong>用于幫助我們生成與mutations對(duì)話的方法，即：包含$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.模塊化+命名空間

目的：讓代碼更好維護(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'}),

"""

?? 路由

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

前端路由：key是路徑，value是組件。

1.基本使用

安裝vue-router，命令：npm i vue-router

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

編寫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

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

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

"""
指定展示位置
"""

<router-view></router-view>

"""

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

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

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

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

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通過children配置子級(jí)路由
			{
				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的對(duì)象寫法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
			title:'你好'
		}
	}"
>跳轉(zhuǎn)</router-link>

"""
接收參數(shù)：
"""

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

"""

5.命名路由

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

如何使用

• 給路由命名：
  """

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

"""
簡(jiǎn)化跳轉(zhuǎn)：
"""

<!--簡(jiǎn)化前，需要寫完整的路徑 -->
<router-link to="/demo/test/welcome">跳轉(zhuǎn)</router-link>
<!--簡(jiǎn)化后，直接通過名字跳轉(zhuǎn) -->
<router-link :to="{name:'hello'}">跳轉(zhuǎn)</router-link>
<!--簡(jiǎn)化寫法配合傳遞參數(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的對(duì)象寫法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
			title:'你好'
		}
	}"
>跳轉(zhuǎn)</router-link>

"""

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

接收參數(shù)：
"""

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

"""

7.路由的props配置

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

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

"""

replace屬性

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

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

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

具體編碼：
"""

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

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

具體編碼：
"""

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

"""

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

• 作用：路由組件所獨(dú)有的兩個(gè)鉤子，用于捕獲路由組件的激活狀態(tài)。

• 具體名字：
  activated路由組件被激活時(shí)觸發(fā)。
  deactivated路由組件失活時(shí)觸發(fā)。

12.路由守衛(wèi)

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

分類：全局守衛(wèi)、獨(dú)享守衛(wèi)、組件內(nèi)守衛(wèi)

全局守衛(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('暫無權(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)頁的title
	}else{
		document.title = 'vue_test'
	}
})

"""

獨(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('暫無權(quán)限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

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

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

"""文章來源地址http://www.zghlxwxcb.cn/news/detail-603002.html

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

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

到了這里，關(guān)于Vue詳解----一篇帶你從頭領(lǐng)悟到尾，享受飛升的感覺的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！