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