資訊專欄INFORMATION COLUMN
摘要：簡介用動態(tài)路由實現(xiàn)權(quán)限控制，是一個很的方案不是么初始路由只有登錄頁，根據(jù)用戶的查詢對應(yīng)的權(quán)限，然后，將獲取到的菜單數(shù)據(jù)放入和瀏覽器緩存中。
addRoutes簡介
用動態(tài)路由實現(xiàn)權(quán)限控制，是一個很nice的方案不是么？ 初始路由只有登錄頁，根據(jù)用戶的id查詢對應(yīng)的權(quán)限，然后addRoutes，將獲取到的菜單數(shù)據(jù)放入vuex和瀏覽器緩存中。
動態(tài)添加更多的路由規(guī)則。參數(shù)必須是一個符合 routes 選項要求的數(shù)組。實現(xiàn)方案
這里的routers其實就是代表將來存放菜單權(quán)限的js，即vuex中一個state
// 初始路由文件
import Vue from "vue"
import Router from "vue-router"
import routers from "./router"
Vue.use(Router)
const index = () => import("@/views/index/index")
export default new Router({
routes: [
{ path: "/", component: index },
...routers
]
})
addRoutes 方法使用
let router = [
{
path: "*", component: (resolve) => require(["@/views/addRoutes/404.vue"], resolve), name: "404", description: "這是addRoutes出來的404頁面"
},
{
path: "/foo", component: (resolve) => require(["@/views/addRoutes/foo.vue"], resolve), name: "foo", description: "這是addRoutes出來的foo頁面"
}
]
// addRoutes
this.$router.addRoutes(router)
這樣就完成了動態(tài)路由的添加，你可以試著在addRoutes后用this.$router.push({path: "你的路由地址"})去訪問你新添加的路由元。
然而這樣并沒有結(jié)束，因為你把404頁面渲染在了前面， 這樣會導(dǎo)致在某些情況下你的foo路由會被渲染為404頁面，因為路由先找到404頁面。所以我們需要把404放在最下面。
let router = [
{
path: "/foo", component: (resolve) => require(["@/views/addRoutes/foo.vue"], resolve), name: "foo", description: "這是addRoutes出來的foo頁面"
},
{
path: "*", component: (resolve) => require(["@/views/addRoutes/404.vue"], resolve), name: "404", description: "這是addRoutes出來的404頁面"
}
]
這個時候就到了找bug的時候了，我們發(fā)現(xiàn)在刷新瀏覽器之后，我們動態(tài)添加的路由規(guī)則竟然不見了，不要慌，這個時候就輪到vuex登場了，也就是最開始提到的將獲取到的菜單數(shù)據(jù)放入vuex和瀏覽器緩存中。
解決方案： 將瀏覽器緩存中的菜單數(shù)據(jù)與vuex綁定起來，將vuex的數(shù)據(jù)與router實例綁定起來，當(dāng)然，你也可以直接將瀏覽器緩存與router實例綁定起來，但是不建議這么做，畢竟瀏覽器緩存不是你可以控制的。這樣就解決了刷新后丟失的bug了。
源碼地址
另外放上新搭建的博客地址：http://blacklisten.cn
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/94534.html
摘要：已經(jīng)連續(xù)做過幾個小程序的項目了，閑暇時間分享一下遇到的坑坑，共勉。組件樣式問題多行文本問題開發(fā)者工具模擬器默認(rèn)值有差異描述開發(fā)者工具模擬器顯示無默認(rèn)值，然后有且均不相同。解決方案獲取機型信息進(jìn)行邏輯判斷模擬器不考慮兼容樣式書寫未完待續(xù) 已經(jīng)連續(xù)做過幾個小程序的項目了，閑暇時間分享一下遇到的坑坑，共勉。 wxml && wxss 組件樣式問題 textarea 多行文本 問題：io...
摘要：上線時間問題發(fā)布審核時間，微信小時內(nèi)會審核完成，但是支付寶官方公示是上線審核需要三到五個工作日，據(jù)親測，實際支付寶審核印版不會超過小時，但是支付寶的審核相比較微信真的很嚴(yán)格。 前言： 最近一個月接收一個支付寶小程序項目，并進(jìn)行原生開發(fā)，現(xiàn)將遇到的問題，爬過的坑給大家進(jìn)行分享，希望讀者可以少走彎路，以下介紹的內(nèi)容將從大方面到細(xì)節(jié)進(jìn)行展開。 廢話少言，直接開始步入正題 ①：上傳、發(fā)布問...
閱讀 891·2023-04-25 20:18
閱讀 2183·2021-11-22 13:54
閱讀 2637·2021-09-26 09:55
閱讀 4022·2021-09-22 15:28
閱讀 3048·2021-09-03 10:34
閱讀 1790·2021-07-28 00:15
閱讀 1701·2019-08-30 14:25
閱讀 1396·2019-08-29 17:16
