Vue2.0生命周期及路由導航守衛

chengjianhua 發布于2019-08-26 13:27 / 2698人閱讀

摘要：的生命周期，有的時候還是會不熟悉的樣子，找了點相關的文章，然后自己嘗試著做了點示例，這里記錄下，說不定面試就用上了生命周期的相關圖片生命周期及路由的鉤子函數實例初始化之后，初始化注入及響應前被調用實例已經創建完成之后被調用，屬性已綁定，但還

Vue的生命周期，有的時候還是會不熟悉的樣子，找了點相關的文章，然后自己嘗試著做了點示例，這里記錄下，說不定面試就用上了

1.Vue生命周期的相關圖片

2.Vue生命周期及路由的鉤子函數

beforeCreate

實例初始化之后，初始化注入(init injections)及響應(reactivity)前被調用

created

實例已經創建完成之后被調用，屬性已綁定，但DOM還未生成，$el為undefined
這里要視情況來定，根據你的業務來判斷是否可以在這里進行ajax請求

beforeMounted

在這里之前會根據是否有el元素及是否有內置的template模板來進行選擇
沒有el則在vm.mounted(el)調用之后再往下執行，沒有內置的模板則使用外層的template模板
模板編譯、掛載之前，此時$el還是undefined

mounted

實例掛載到頁面上，此時可以訪問$el

beforeDestroy

在組件銷毀之前調用，這里依然可以訪問$el
這里可以做一些重置的操作，比如清除掉組件中的 定時器 和 監聽的dom事件

destroy

組件銷毀

路由導航守衛

要調用next()不然頁面會卡在中途

beforeRouteEnter

路由進入的時候調用，在組件beforeCreate前
此時還沒有組件實例，this為undefined，組件實例還沒有被創建
beforeRouteEnter 是支持給 next 傳遞回調的唯一守衛
對于 beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經可用了，所以不支持傳遞回調

beforeRouteUpdate

在當前路由改變，但是該組件被復用時調用
對于一個帶有動態參數的路徑 /index/:id，在 /index/1 和 /index/2 之間跳轉的時候
由于會渲染同樣的 Index 組件，因此組件實例會被復用。而這個鉤子就會在這個情況下被調用

beforeRouteLeave

離開守衛通常用來禁止用戶在還未保存修改前突然離開,該導航可以通過 next(false) 來取消

3.示例代碼

我這里是用了webpack打包來做的，并沒有用new Vue來新建

輸出圖片

路由為/routerIndex時

當組件被復用時，路由為/routerIndex?id=1

離開當前路由時

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

往期好文推薦：

判斷iOS和Android及PC端

純css實現瀑布流（multi-column多列及flex布局）

實現單行及多行文字超出后加省略號

微信小程序之購物車和父子組件傳值及calc的注意事項

GPU云服務器云服務器服務器生命周期及利舊 vue2.0 cdn 生命周期軟件生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108849.html

VUE2.0學習筆記

摘要：添加事件偵聽器時使用模式。只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。差別在哪里將特性名轉換為從開始支持語法糖，會擴展成一個更新父組件綁定值的偵聽器。如果需要條件渲染多個元素，可以使用包裹。 1.前言安裝直接用引入（本地或者cdn） npm npm install vue vue-cli官方腳手架 # 全局安裝 vue-cli $ npm install --glo...

pumpkin9 2019-08-23 14:38 評論0 收藏0
JS每日一題：Vue-router有哪些鉤子？使用場景？

摘要：問有哪些鉤子使用場景的實現可以點這里前面我們用大白話講過什么是鉤子，這里在重復一下，就是在什么什么之前什么什么之后英文叫專業點叫生命周期，裝逼點可以叫守衛中也存在鉤子的概念分為三步記憶全局守衛路由獨享守衛組件獨享守衛全局守衛很好理解，全 20190218問 Vue-router有哪些鉤子？使用場景？ router的實現可以點這里前面我們用大白話講過什么是鉤子，這里在重復一下，就是在...

張金寶 2019-08-23 15:18 評論0 收藏0
vue總結

摘要：用創建好的實例調用守衛中傳給的回調函數。注冊一個全局守衛。這和類似，區別是在導航被確認之前，同時在所有組件內守衛和異步路由組件被解析之后，解析守衛就被調用僅代表個人見解，能力有限，如有錯誤會誤人子弟的地方歡迎留言指出謝謝原文地址 vue(前端框架)解決了什么問題？現在的前端頁面元素越來越多，結構也變得越來越復雜,當數據和視圖混合在一起的時候對它們的處理會十分復雜，同時也很容易出現錯...

Youngs 2019-08-23 18:38 評論0 收藏0
React vs Vue 特性總結

摘要：使用組件當成標簽的形式放在結構中，例如或。子組件通知父組件給子組件傳遞一個回調函數，在子組件中執行時，填入實參。生命周期鉤子函數掛載更新銷毀。組件內部的狀態監聽數據變化導航守衛全局組件內路由獨享。給子組件定制結構不能給子組件定制結構。用 react 和 vue 開發過項目后，我有一點兒心得，對二者的特性進行一個對比，能夠發現一些同異之處。這是我在思否寫的第一篇文章，如果哪里寫得不對，...

waltr 2019-08-23 13:45 評論0 收藏0
前端面試必問題答疑（2）

摘要：解決了組件之間同一狀態的共享問題。當我們的應用遇到多個組件之間的共享問題時會需要狀態管理核心狀態管理有個核心，分別是以及。當錯誤出現時，我們現在也會有一個記錄之前發生了什么。此外，每個實例組件仍然可以擁有和管理自己的私有狀態一，css部分 1，簡單介紹下css權重優先級：默認樣式 .father{ width:300px; ...

wuyangchun 2019-08-02 16:16 評論0 收藏0