addRoutes爬坑记

draveness 发布于2019-08-22 16:39 / 1823人阅读

摘要：简介用动态路由实现权限控制，是一个很的方案不是么初始路由只有登录页，根据用户的查询对应的权限，然后，将获取到的菜单数据放入和浏览器缓存中。

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 爬坑篇爬坑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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