筆記
腳手架文件結(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
- vue.js與vue.runtime.xxx.js的區(qū)別:
- vue.js是完整版的Vue,包含:核心功能 + 模板解析器谊娇。
- vue.runtime.xxx.js是運(yùn)行版的Vue,只包含:核心功能罗晕;沒(méi)有模板解析器济欢。
- 因?yàn)関ue.runtime.xxx.js沒(méi)有模板解析器,所以不能使用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è)性化定制酬屉,詳情見(jiàn):https://cli.vuejs.org/zh
ref屬性
- 被用來(lái)給元素或子組件注冊(cè)引用信息(id的替代者)
- 應(yīng)用在html標(biāo)簽上獲取的是真實(shí)DOM元素半等,應(yīng)用在組件標(biāo)簽上是組件實(shí)例對(duì)象(vc)
- 使用方式:
- 打標(biāo)識(shí):
<h1 ref="xxx">.....</h1>
或<School ref="xxx"></School>
- 獲取:
this.$refs.xxx
- 打標(biāo)識(shí):
props配置項(xiàng)
功能:讓組件接收外部傳過(guò)來(lái)的數(shù)據(jù)
傳遞數(shù)據(jù):
<Demo name="xxx"/>
-
接收數(shù)據(jù):
第一種方式(只接收):
props:['name']
第二種方式(限制類(lèi)型):
props:{name:String}
-
第三種方式(限制類(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(混入)
功能:可以把多個(gè)組件共用的配置提取成一個(gè)混入對(duì)象
-
使用方式:
第一步定義混合:
{ data(){....}, methods:{....} .... }
第二步使用混入:
全局混入:```Vue.mixin(xxx)``` 局部混入:```mixins:['xxx'] ```
插件
功能:用于增強(qiáng)Vue
本質(zhì):包含install方法的一個(gè)對(duì)象锨络,install的第一個(gè)參數(shù)是Vue赌躺,第二個(gè)以后的參數(shù)是插件使用者傳遞的數(shù)據(jù)。
-
定義插件:
對(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 }
使用插件:
Vue.use()
scoped樣式
- 作用:讓樣式在局部生效羡儿,防止沖突礼患。
- 寫(xiě)法:
<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). 一些組件在用:放在他們共同的父組件上(<span style="color:red">狀態(tài)提升</span>)肤粱。 (3).實(shí)現(xiàn)交互:從綁定事件開(kāi)始。
-
props適用于:
(1).父組件 ==> 子組件 通信 (2).子組件 ==> 父組件 通信(要求父先給子一個(gè)函數(shù))
使用v-model時(shí)要切記:v-model綁定的值不能是props傳過(guò)來(lái)的值厨相,因?yàn)閜rops是不可以修改的领曼!
props傳過(guò)來(lái)的若是對(duì)象類(lèi)型的值鸥鹉,修改對(duì)象中的屬性時(shí)Vue不會(huì)報(bào)錯(cuò),但不推薦這樣做庶骄。
webStorage
存儲(chǔ)內(nèi)容大小一般支持5MB左右(不同瀏覽器可能還不一樣)
瀏覽器端通過(guò) Window.sessionStorage 和 Window.localStorage 屬性來(lái)實(shí)現(xiàn)本地存儲(chǔ)機(jī)制毁渗。
-
相關(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。
組件的自定義事件
一種組件間通信的方式窜骄,適用于:<strong style="color:red">子組件 ===> 父組件</strong>
使用場(chǎng)景:A是父組件锦募,B是子組件,B想給A傳數(shù)據(jù)邻遏,那么就要在A中給B綁定自定義事件(<span style="color:red">事件的回調(diào)在A中</span>)糠亩。
-
綁定自定義事件:
第一種方式,在父組件中:
<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
修飾符。注意:通過(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)
一種組件間通信的方式文判,適用于<span style="color:red">任意組件間通信</span>。
-
安裝全局事件總線(xiàn):
new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安裝全局事件總線(xiàn)室梅,$bus就是當(dāng)前應(yīng)用的vm }, ...... })
-
使用事件總線(xiàn):
-
接收數(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去解綁<span style="color:red">當(dāng)前組件所用到的</span>事件灰嫉。
消息訂閱與發(fā)布(pubsub)
一種組件間通信的方式,適用于<span style="color:red">任意組件間通信</span>嗓奢。
-
使用步驟:
安裝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
- 語(yǔ)法:
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封裝的過(guò)度與動(dòng)畫(huà)
作用:在插入册赛、更新或移除 DOM元素時(shí),在合適的時(shí)候給元素添加樣式類(lèi)名震嫉。
圖示:<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />
-
寫(xiě)法:
-
準(zhǔn)備好樣式:
- 元素進(jìn)入的樣式:
- v-enter:進(jìn)入的起點(diǎn)
- v-enter-active:進(jìn)入過(guò)程中
- v-enter-to:進(jìn)入的終點(diǎn)
- 元素離開(kāi)的樣式:
- v-leave:離開(kāi)的起點(diǎn)
- v-leave-active:離開(kāi)過(guò)程中
- v-leave-to:離開(kāi)的終點(diǎn)
- 元素進(jìn)入的樣式:
-
使用
<transition>
包裹要過(guò)度的元素森瘪,并配置name屬性:<transition name="hello"> <h1 v-show="isShow">你好啊票堵!</h1> </transition>
備注:若有多個(gè)元素需要過(guò)度扼睬,則需要使用:
<transition-group>
,且每個(gè)元素都要指定key
值悴势。
-
vue腳手架配置代理
方法一
在vue.config.js中添加如下配置:
devServer:{
proxy:"http://localhost:5000"
}
說(shuō)明:
- 優(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)先匹配前端資源)
方法二
編寫(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ō)明:
- 優(yōu)點(diǎn):可以配置多個(gè)代理矗蕊,且可以靈活的控制請(qǐng)求是否走代理短蜕。
- 缺點(diǎn):配置略微繁瑣,請(qǐng)求資源時(shí)必須加前綴傻咖。
插槽
作用:讓父組件可以向子組件指定位置插入html結(jié)構(gòu)朋魔,也是一種組件間通信的方式,適用于 <strong style="color:red">父組件 ===> 子組件</strong> 卿操。
分類(lèi):默認(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)需要組件的使用者來(lái)決定扇雕。</span>(games數(shù)據(jù)在Category組件中拓售,但使用數(shù)據(jù)所遍歷出來(lái)的結(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:['紅色警戒','穿越火線(xiàn)','勁舞團(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)行集中式的管理(讀/寫(xiě))镶奉,也是一種組件間通信的方式础淤,且適用于任意組件間通信。
2.何時(shí)使用哨苛?
多個(gè)組件需要共享數(shù)據(jù)時(shí)
3.搭建vuex環(huán)境
-
創(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 })
-
在
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核心庫(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, })
組件中讀取vuex中的數(shù)據(jù):
$store.state.sum
-
組件中修改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的使用
概念:當(dāng)state中的數(shù)據(jù)需要經(jīng)過(guò)加工后再使用時(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ì)象寫(xiě)法) ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成計(jì)算屬性:sum、school砚蓬、subject(數(shù)組寫(xiě)法) ...mapState(['sum','school','subject']), },
-
<strong>mapGetters方法:</strong>用于幫助我們映射
getters
中的數(shù)據(jù)為計(jì)算屬性computed: { //借助mapGetters生成計(jì)算屬性:bigSum(對(duì)象寫(xiě)法) ...mapGetters({bigSum:'bigSum'}), //借助mapGetters生成計(jì)算屬性:bigSum(數(shù)組寫(xiě)法) ...mapGetters(['bigSum']) },
-
<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']) }
-
<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.模塊化+命名空間
目的:讓代碼更好維護(hù),讓多種數(shù)據(jù)分類(lèi)更加明確浑吟。
-
修改
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 } })
-
開(kāi)啟命名空間后笙纤,組件中讀取state數(shù)據(jù):
//方式一:自己直接讀取 this.$store.state.personAbout.list //方式二:借助mapState讀取: ...mapState('countAbout',['sum','school','subject']),
-
開(kāi)啟命名空間后组力,組件中讀取getters數(shù)據(jù):
//方式一:自己直接讀取 this.$store.getters['personAbout/firstPersonName'] //方式二:借助mapGetters讀仁∪荨: ...mapGetters('countAbout',['bigSum'])
-
開(kāi)啟命名空間后,組件中調(diào)用dispatch
//方式一:自己直接dispatch this.$store.dispatch('personAbout/addPersonWang',person) //方式二:借助mapActions: ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
-
開(kāi)啟命名空間后燎字,組件中調(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)
-
編寫(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
-
實(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
文件夾往湿。 - 通過(guò)切換,“隱藏”了的路由組件惨好,默認(rèn)是被銷(xiāo)毀掉的煌茴,需要的時(shí)候再去掛載。
- 每個(gè)組件都有自己的
$route
屬性日川,里面存儲(chǔ)著自己的路由信息蔓腐。 - 整個(gè)應(yīng)用只有一個(gè)router,可以通過(guò)組件的
$router
屬性獲取到龄句。
3.多級(jí)路由(多級(jí)路由)
-
配置路由規(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 } ] } ]
-
跳轉(zhuǎn)(要寫(xiě)完整路徑):
<router-link to="/home/news">News</router-link>
4.路由的query參數(shù)
-
傳遞參數(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>
-
接收參數(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)化前,需要寫(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ù)
-
配置路由葬燎,聲明接收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的字符串寫(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配置壕探!
-
接收參數(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屬性
- 作用:控制路由跳轉(zhuǎn)時(shí)操作瀏覽器歷史記錄的模式
- 瀏覽器的歷史記錄有兩種寫(xiě)入方式:分別為
push
和replace
厉熟,push
是追加歷史記錄导盅,replace
是替換當(dāng)前記錄。路由跳轉(zhuǎn)時(shí)候默認(rèn)為push
- 如何開(kāi)啟
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.緩存路由組件
作用:讓不展示的路由組件保持掛載认轨,不被銷(xiāo)毀。
-
具體編碼:
<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)限控制
分類(lèi):全局守衛(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('暫無(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' } })
-
獨(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() } }
-
組件內(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.路由器的兩種工作模式
- 對(duì)于一個(gè)url來(lái)說(shuō)猬错,什么是hash值窗看?—— #及其后面的內(nèi)容就是hash值。
- hash值不會(huì)包含在 HTTP 請(qǐng)求中倦炒,即:hash值不會(huì)帶給服務(wù)器显沈。
- hash模式:
- 地址中永遠(yuǎn)帶著#號(hào),不美觀 逢唤。
- 若以后將地址通過(guò)第三方手機(jī)app分享拉讯,若app校驗(yàn)嚴(yán)格,則地址會(huì)被標(biāo)記為不合法鳖藕。
- 兼容性較好魔慷。
- history模式:
- 地址干凈,美觀 著恩。
- 兼容性和hash模式相比略差院尔。
- 應(yīng)用部署上線(xiàn)時(shí)需要后端人員支持,解決刷新頁(yè)面服務(wù)端404的問(wèn)題喉誊。