vue 路由知識點梳理及應用場景整理

2022-07-18 05:27:14 字數 2579 閱讀 1439

最近做專案才發現,我確實對 vue-router 太不熟悉了,都只了解個簡單用法就開始搞了,本來很簡單的問題,都搞不清楚。現在重新看一遍文件,重新梳理一下。

說實話,路由我一直也就光顧著用,沒認真思考過這個問題,還是那次人家面試問了這個,我才反應過來是應該好好的了解一下了。

無重新整理跳轉頁面,是單頁應用的一大優勢,使用者體驗好,載入速度快,vue 路由的跳轉就是無重新整理的,它有兩種形式,可以在定義路由的時候通過mode欄位去配置,如果不配置這個字段,那麼預設使用的就是hash模式。

hash 模式,即通過在鏈結後新增 # + 路由名字,根據匹配這個欄位的變化,觸發hashchange事件,動態的渲染出頁面。就有點類似像 a 鏈結用作頁面上的錨點一樣,不會重新整理頁面。

另外一種方式,是history模式,也就是使用的瀏覽器的 history api,pushstatereplacestate。通過呼叫pushstate操作瀏覽器的history物件,改變當前位址,同時結合window.onpopstate監聽瀏覽器的返回和前進事件,同樣可以實現無重新整理的跳轉頁面。replacestatepushstete不同的就是,前者是替換一條記錄,後者是新增一條記錄。

那麼問題來了,既然 history 模式樣子好看,功能也一樣,為啥還是用 hash 模式的人比較多【此處沒有真憑實據,我瞎說的】?因為 history 模式,還需要服務端進行配置,否則重新整理頁面就會產生 404 錯誤。這裡也比較好理解啦,因為我們實際上是使用的 pushstate 操作頁面的跳轉,而不是真的去伺服器請求另外乙個 list.html 檔案,那按照這個路徑,自然找不到啦~

如果是 nginx 的伺服器,在location /裡面加上try_files $uri $uri/ /index.html;即可。這行**表示:如果匹配不到靜態資源的路徑,就將重定向到 index 頁面,這樣就不會出錯啦~因為需要找後端小哥哥修改伺服器配置檔案,如果自己沒有完全理解,兩邊又溝通不清楚的情況下,使用 history 模式的難度無疑就大了一些~不過也不是什麼大問題~全看個人需要啦哈哈~

頁面引數無非就兩種,query 和 params,params 是以/params的形式表現在 url 上,而 query 是以?query=query1這種形式表現在 url 上,此外,使用 params 引數還需要配置到路由定義上,不然不會展示在 url 上,並且重新整理就會消失。

這個比較簡單,需要注意的地方就是:如果傳 params 引數,不能使用path字段跳轉,否則沒效果。而 query 引數則沒有這個限制,使用namepath欄位都可以。

這個雖然簡單!但是一定要自己操作一遍才記得住啊。。反正我是早就看到,但是一直記混了~~重新用 demo 寫了一遍才記住~而且別人說的也不一定就是對的,還是要自己實驗一遍才知道呢。╮(╯▽╰)╭

vue 路由守衛分為三種,一種是全域性的路由守衛,通常在例項化路由之後設定,來做一些通用的路由操作,它所有的路由跳轉都會執行的操作;一種是單個路由獨享的守衛,在單個路由定義的時候進行設定,所有跳轉這個路由都會執行;另外一種就是元件內的守衛,只在元件內生效。

全域性路由守衛型別:

路由獨享的守衛:

元件獨享的守衛:

最開始路由跳轉我都是用push()比較多,或者用go()做返回,很少用到過replace(),後來在業務需求下翻文件才發現這個漏掉的 api。簡單來說,當你需要從a頁面跳轉到b頁面,再跳轉到c頁面,然後在c頁面返回,能直接返回到a頁面。那麼在b頁面跳轉c頁面的時候,使用replace()方法進行跳轉即可。

// router.js

}// main.js

router.beforeeach(to, from, next)

next() // 這個方法必須呼叫 不然路由不會跳轉

}

let _url = encodeuricomponent(location.href)
獲取 wxconfig 配置

前端獲取 wxconfig 比較簡單,主要的操作都在後端,前端只需要傳乙個 url 引數,由後端去獲取 config 的引數,回傳給前端。前端拿到引數後,呼叫wx.config方法。

}參考文件:

vue之路由應用場景

路由配置 當前頁面跳轉 this.router.push name不可以區分大小寫 this.router.push this.router.push 不區分大小寫 this.router.push you offline 不區分大小寫新頁面開啟 const routeurl this.router...

vue路由知識點

建立路由,引入vue router自帶的vuerouter類 let router new vuerouter 在路由對映表中註冊元件 let routes 預設展示的路由 預設展示的路由,輸入錯誤位址的時候展示的頁面 展示 let home let list let routes 路由對映表 配置...

zookeeper應用場景及相關知識

zookeeper是乙個高可用的分布式資料管理與系統協調框架。基於對paxos演算法的實現,使該框架保證了分布式環境中資料的強一致性,也正是基於這樣的特性,使得zookeeper能夠應用於很多場景。網上對zk的使用場景也有不少介紹,本文將結合作者身邊的專案例子,系統的對zk的使用場景進行歸類介紹。值...