vue-router的路由

路由和組件是有區別的:組件一般是在同一個頁面的不同模塊,但是路由是直接切換到另一個頁面,之前的頁面銷毀。

App.vue中的router-view會渲染頂級路由匹配到的組件。組件內部嵌套的router-view會渲染子路由匹配到的組件。

當路由跳轉的時候,我們需要一些權限判斷或者其他操作。這個時候就需要使用路由的鉤子函數。
定義:路由鉤子主要是給使用者在路由發生變化時進行一些特殊的處理而定義的函數。
總體來講vue里面提供了三大類鉤子
1.全局守衛
router.beforeEach 全局前置守衛 進入路由之前
router.beforeResolve 全局解析守衛 在beforeRouteEnter調用之后調用
router.afterEach 全局后置鉤子 進入路由之后
2.路由守衛
router.beforeEnter進入路由之前
3.組件守衛
beforeRouteEnter 進入路由前
beforeRouteUpdate 路由復用同一個組件時
beforeRouteLeave 離開當前路由時

完整的導航解析流程

觸發進入其他路由。
調用要離開路由的組件守衛beforeRouteLeave
調用局前置守衛:beforeEach
在重用的組件里調用 beforeRouteUpdate
調用路由獨享守衛 beforeEnter。
解析異步路由組件。
在將要進入的路由組件中調用beforeRouteEnter
調用全局解析守衛 beforeResolve
導航被確認。
調用全局后置鉤子的 afterEach 鉤子。
觸發DOM更新(mounted)。
執行beforeRouteEnter 守衛中傳給 next 的回調函數
總結:除了router.afterEach是兩個參數to,from以外,其他都是三個參數,to,from,next

?

轉載于:https://www.cnblogs.com/zhouyideboke/p/11187721.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247486.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247486.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247486.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

mac上的更新node npm

查看當前node版本 $ node -v v8.9.4 清除node.js的cache(不確定有沒有必要) $ sudo npm cache clean -f Password: npm WARN using --force I sure hope you know what you are doing. 安裝工具n ,這個工具是專門用來管理node.js版本的 $ sudo npm install -g …

電源芯片選擇DC/DC還是LDO?《轉》

這個取決于你的應用場合。比如用在升壓場合,當然只能用DC/DC,因為LDO是壓降型,不能升壓。另外看下各自的主要特點: DC/DC:效率高,噪聲大; LDO:噪聲低,靜態電流小; 所以如果是用在壓降…

Atom React或前端插件推薦

分享一些Atom個人在用的插件,喜歡請點贊 1. color-picker 取色工具 2. pigments 編輯器中直接查看代碼所代表的顏色,工具雖小但是很實用。 3. minimap 仿sublime text的縮略代碼查看,想找的地方一目了然。 4. highlight-selected 選擇某段代碼自動高…

Nike Kyrie 1 Performance Review

Traction – There has been many varying opinions on the Kyrie 1’s traction, and I don’t think any of them have been wrong. I’d say under the right conditions, the traction is excellent. I’ve experienced nothing but great traction out of them, but all o…

Tapable.plugin is deprecated. Use new API on `.hooks` instead

問題描述 在使用extract-text-webpack-plugin給webpack打包時出現報錯 Tapable.plugin is deprecated. Use new API on .hooks instead 1 問題原因 extract-text-webpack-plugin目前版本不支持webpack4。 解決方案 使用extract-text-webpack-plugin的最新的beta版 npm inst…

第二周進度總結

本周主要在完成假期作業,學習的時間大部分花在代碼上。完成了3個代碼的編譯。第一個是害死人不償命的(3n1)猜想。第二個是成績排名(輸出成績最高和成績最低學生的姓名和學號)。第三個是換個格式來輸出任一個不超過 3 位的正整數。這三個題目中…

webpack.optimize.CommonsChunkPulgin is not a constructor???請看CommonsChunkPlugin VS SplitChunksPlugin

webpack團隊人員臥薪嘗膽五個多月的時間終于帶來的webpack4,個人覺得webpack4帶來的最大優化便是對于懶加載塊拆分的優化,刪除了CommonsChunkPlugin,新增了優化后的SplitChunksPlugin,那么CommonsChunkPlugin的痛點在哪&#xff1…

多重表(廣義表)

在深入淺出數據結構系列前面的文章中&#xff0c;我們一直在討論“線性表”&#xff0c;其形式如下&#xff1a; 由a1,a2,a3,……a(n-1)個元素組成的序列&#xff0c;其中每一個元素ai(0<i<n)都是一個“原子”&#xff0c;“原子”的意思就是說元素本身是一個個體&#x…

簡單教你React父子組件間平級組件間傳值

國慶充電特輯&#xff1a; 堵車堵死&#xff0c;廢話不多說直接上菜。 1.父組件對子組件傳值 利用props屬性傳值 class Component extends React.Component {constructor (props) {super(props);}render() {return (<div><h1>I am {this.props.name}</h1>…

Requests庫的主要方法:requests.request為requests.get和requests.post兩個的匯總,只是需要傳方法...

1. requests.request(method,url,**kwargs&#xff09; method&#xff1a;請求方式&#xff0c;對應get/put/post等七種&#xff1a;擬獲取頁面的url鏈接&#xff1a;控制訪問參數&#xff0c;共13個method&#xff1a;請求方式rrequests.request(GET,url,**kwargs) r reques…

jQuery插件開發教程

jQuery插件開發精品教程&#xff0c;讓你的jQuery提升一個臺階 要說jQuery 最成功的地方&#xff0c;我認為是它的可擴展性吸引了眾多開發者為其開發插件&#xff0c;從而建立起了一個生態系統。這好比大公司們爭相做平臺一樣&#xff0c;得平臺者得天下。蘋果&#xff0c;微軟…

Html Email 郵件html頁編寫指南

前言 寫過郵件的html的童學應該都知道&#xff0c;郵件的html一般都用table來布局&#xff0c;為什么呢&#xff1f;原因是大多數的郵件客戶端&#xff08;比如Outlook和Gmail&#xff09;&#xff0c;會過濾HTML設置&#xff0c;讓郵件面目全非。 經過多次的郵件編寫實踐及度…

vue父組件異步獲取動態數據傳遞給子組件獲取不到值

原理&#xff1a; 在父組件中使用axios獲取異步數據傳給子組件&#xff0c;但是發現子組件在渲染的時候并沒有數據&#xff0c;在created里面打印也是空的&#xff0c;結果發現一開始子組件綁定的數據是空的&#xff0c;在請求數據沒有返回數據時&#xff0c;子組件就已經加載了…

MAC 下配置JavaEE開發環境

1、安裝jdk&#xff0c;官網下載 路徑&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/index.html 選擇合適的版本下載即可。 2、配置Java環境變量 &#xff08;1&#xff09;commandspace 輸入termimal 打開終端 &#xff08;2&#xff09;在終端中輸…

微服務深入淺出(7)-- 網關路由Zuul

Zuul用于構建邊界服務&#xff0c;致力于動態路由&#xff0c;過濾&#xff0c;監控&#xff0c;彈性伸縮和安全等方向。 1、ZuulRibbonEureka結合&#xff0c;可以實現智能路由和負載均衡 2、網關將所有服務的API接口統一聚合統一暴露 3、網關統一爆率接口后&#xff0c;可以做…

判斷JavaScript對象為null或者屬性為空

首先說下null與undefined區別&#xff1a; 對已聲明但未初始化的和未聲明的變量執行typeof&#xff0c;都返回"undefined"。 null表示一個空對象指針&#xff0c;typeof操作會返回"object"。 一般不顯式的把變量的值設置為undefined&#xff0c;但null相…

font face如何導入自定義字體

首先&#xff0c;瀏覽器支持什么字體取決于用戶系統里安裝了什么字體&#xff0c;比如CSS中這么寫&#xff1a; font-family:"微軟雅黑","黑體","宋體"; 那么瀏覽器會嘗試按照從左到右的順序依次應用&#xff0c;假設用戶電腦上沒有安裝微軟雅黑…

Python中_,__,__xx__方法區別

_xx 單下劃線開頭 Python中沒有真正的私有屬性或方法,可以在你想聲明為私有的方法和屬性前加上單下劃線,以提示該屬性和方法不應在外部調用.如果真的調用了也不會出錯,但不符合規范. 方法就是以單下劃線開頭命名定義了&#xff0c;這種定義不會被*導入&#xff08;from module …

利用@media screen實現網頁布局的自適應

利用media screen實現網頁布局的自適應 優點:無需插件和手機主題,對移動設備友好,能夠適應各種窗口大小。只需在CSS中添加media screen屬性,根據瀏覽器寬度判斷并輸出不同的長寬值 1280分辨率以上&#xff08;大于1200px&#xff09; media screen and (min-width:1200px){#p…

C# webkit內核 網頁填表

比如我要操作的是下面的input 用到的方法是 調用如下&#xff1a; webkit.StringByEvaluatingJavaScriptFromString("document.getElementsByClassName(login_i_con_li_ipt name)[0].valueThis is a Demo."); 類似這種div在webkit中好像是無法通過常規方法模擬的 這時…