第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

實(shí)現(xiàn)手寫簡(jiǎn)單VueRouter源碼

標(biāo)簽:
Vue.js

要求

  1. 必须有一个install方法,供Vue.use调用
  2. 实现hash变化,响应式数据自动更新
	let Vue;
	class VueRouter{
		constructor(options){
			this.$options = options;
			this.routeMap = {};//缓存route 和 path 的映射关系
			this.$options.routes.forEach(route=>{
				this.routeMap[route.path] = route
			})
			const initial = window.location.hash.slice(1) || '/';
			//实现current 响应式,发生变化更新所有引用current的渲染
			Vue.util.defineReactive(this,'current',initial)
			//监听hash变化
			window.addEventListener('hashchange',()=>{
				//使用箭头函数,this指向不变
				this.current  = window.location.hash.slice(1)
			})
			//每次重新进入页面时执行
			window.addEventListener('load',()=>{
				this.current = window.location.hash.slice(1)
			})
		}
	}
	VueRouter.install = function(_Vue){
		Vue = _Vue;
		//使用混入 延迟执行到router创建完毕才执行
		Vue.mixin({
			//每个vue组件实例化都会执行一遍
			beforeCreate(){
				if(this.$options.router){
					//只有main.js 根组件实例化时才会有router选项
					Vue.prototype.$router = this.$options.router
				}
			}
		})
		Vue.component('router-link',{
			props:{
				to:{
				type:String,
				required:true
				}
			},
			render(h){
				return h('a',{attrs:{href:'#'+this.to}},this.$slots.default)
			}
		})
		Vue.component('router-view',{
			render(h){
				let {routeMap,current} = this.$router;
				let component = routeMap[current]?routeMap[current].component:null;
				return h(component)
			}
		})
	}
	export default VueRouter
點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消