addRoutes爬坑記

draveness 發布于2019-08-22 16:39 / 1826人閱讀

摘要：簡介用動態路由實現權限控制，是一個很的方案不是么初始路由只有登錄頁，根據用戶的查詢對應的權限，然后，將獲取到的菜單數據放入和瀏覽器緩存中。

addRoutes簡介

用動態路由實現權限控制，是一個很nice的方案不是么？初始路由只有登錄頁，根據用戶的id查詢對應的權限，然后addRoutes，將獲取到的菜單數據放入vuex和瀏覽器緩存中。

動態添加更多的路由規則。參數必須是一個符合 routes 選項要求的數組。

實現方案

這里的routers其實就是代表將來存放菜單權限的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)

這樣就完成了動態路由的添加，你可以試著在addRoutes后用this.$router.push({path: "你的路由地址"})去訪問你新添加的路由元。

然而這樣并沒有結束，因為你把404頁面渲染在了前面， 這樣會導致在某些情況下你的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的時候了，我們發現在刷新瀏覽器之后，我們動態添加的路由規則竟然不見了，不要慌，這個時候就輪到vuex登場了，也就是最開始提到的將獲取到的菜單數據放入vuex和瀏覽器緩存中。

解決方案： 將瀏覽器緩存中的菜單數據與vuex綁定起來，將vuex的數據與router實例綁定起來，當然，你也可以直接將瀏覽器緩存與router實例綁定起來，但是不建議這么做，畢竟瀏覽器緩存不是你可以控制的。這樣就解決了刷新后丟失的bug了。

源碼地址

另外放上新搭建的博客地址：http://blacklisten.cn

GPU云服務器云服務器爬坑記 addRoutes 爬坑篇爬坑

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

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

小程序爬坑記

摘要：已經連續做過幾個小程序的項目了，閑暇時間分享一下遇到的坑坑，共勉。組件樣式問題多行文本問題開發者工具模擬器默認值有差異描述開發者工具模擬器顯示無默認值，然后有且均不相同。解決方案獲取機型信息進行邏輯判斷模擬器不考慮兼容樣式書寫未完待續已經連續做過幾個小程序的項目了，閑暇時間分享一下遇到的坑坑，共勉。 wxml && wxss 組件樣式問題 textarea 多行文本問題：io...

ConardLi 2019-08-30 13:54 評論0 收藏0
小程序爬坑記

摘要：已經連續做過幾個小程序的項目了，閑暇時間分享一下遇到的坑坑，共勉。組件樣式問題多行文本問題開發者工具模擬器默認值有差異描述開發者工具模擬器顯示無默認值，然后有且均不相同。解決方案獲取機型信息進行邏輯判斷模擬器不考慮兼容樣式書寫未完待續已經連續做過幾個小程序的項目了，閑暇時間分享一下遇到的坑坑，共勉。 wxml && wxss 組件樣式問題 textarea 多行文本問題：io...

NervosNetwork 2019-08-26 11:37 評論0 收藏0
支付寶小程序爬坑記、支付寶與微信小程序的區別。

摘要：上線時間問題發布審核時間，微信小時內會審核完成，但是支付寶官方公示是上線審核需要三到五個工作日，據親測，實際支付寶審核印版不會超過小時，但是支付寶的審核相比較微信真的很嚴格。前言：最近一個月接收一個支付寶小程序項目，并進行原生開發，現將遇到的問題，爬過的坑給大家進行分享，希望讀者可以少走彎路，以下介紹的內容將從大方面到細節進行展開。廢話少言，直接開始步入正題 ①：上傳、發布問...

WilsonLiu95 2019-08-26 10:15 評論0 收藏0