草庐IT

vue动态路由添加，vue-router的addRoute方法实现权限控制，添加根路由和子路由

勇敢*牛牛 2023-06-03 原文

addRoute

路由分为静态路由和动态路由

静态路由和动态路由的优缺点

  • 1、中大型项目，采用的都是动态路由方式,因为后台导航目录运营人员可能会新增菜单,新增菜单后，前端人员得在路由表手动填加上，这样导航才能点击才能对应上页面,这样比较麻烦。
  • 2、如果是动态路由，运营人员新增目录后，因为我是动态路由获取永远是最新的路径，一次性通过动态填加的方式加进去,后边就不用管路由的事了,只关心页面就可以了，也是对权限管理的一种方法。

动态路由实现思路：

  1. 在全局路由守卫中，先判断token值有没有。有的话先看是否存储过，如果存储过直接，页面调用渲染，如果没有，就请求接口,把路由表存储下，除非没有token,跳转登录页面
  2. 路由表里-把那些常规路由(不需要权限的路由，事先都写到路由表里)。把需要权限的路由通过router.addRoute()动态填加到对应的子路由里 。
  3. 动态填加的路由需要处理下。因为后端传给你的是树状结构，一般前端需要把树结构处理成列表结构(通过递归，不断的获取路径,名字那些信息)，填加到路由表里。（我没写 ）

动态路由遇到的问题与解决方式

  1. 登录后路由表里在次加载一遍动态路由-解决第1次页面点击找不到路径问题,因为路由是动态生成的,登录后路由没有被在次生成，路由表里是空的。所以在路由里要在次生成一遍
  2. 也有可能是因为你的路由表里有通配路由，你的书写位置也不是入口文件处，可能就是404页面。
  3. 登录后跳转其它页面,如果刷新，页面找不到问题？原因是路由是动态的，它是在登录后生成的，而其它页面没有在次生成动态路由,所以就找不到。解决办法：可在路由里，在生成一遍动态路由。这样不管在后台哪个页面，一刷新都会先执行。(路由先走)
  4. 具体方法是在入口文件当中，通过全局前置路由守卫获取router路由（考虑到在main.js中这个文件比较繁琐），新文件重新导入

动态添加子路由

获取主路由的一个子数组信息。

router.beforeEach((to,from,next)=>{
    console.log(router);/* 路由对象 */
    console.log(router.options.routes);/* 前端路由实例对象数组(根组) */
    console.log(router.options.routes[0]);/* 需要在里面动态添加子路由的一个根组,插入的也是这个根组对象 */
    console.log(router.options.routes[0].children);/* 获取这个根组下的子路由数组 */
/*纯粹的一次添加路由，其实通过服务器根据权限获取路由信息*/
    if(router.options.routes[0].children.length == 4 && to.path!="/login"){
        router.options.routes[0].children.unshift({path:"test",component:()=>import("@/views/test.vue")})
        router.addRoute(router.options.routes[0]);
        next({
            path: to.path, // 动态添加一个新的路由
            replace: true // 重定向,为了让刚刚添加的路由规则生效
        });

     }else{
         next();
    }   
})

也可以写成：

let newT = router.options.routes[0];/* 需要在里面动态添加子路由的一个根组,插入的也是这个根组对象 */
if (newT.children.length == 4 && to.path != "/login") {//条件保护，防止全局路由守卫死循环执行。
    newT.children.unshift({
        path: "test",
        component: () => import("@/views/test.vue")
    }) //给子路由添加一条数据
    router.addRoute(newT);
    next({
        path: to.path,
        replace: true
    });
} else {
    next()
}

可以看的出来：addRoute 添加一条新的路由记录是一个对象 router.addRoute({});同时这个路由作为现有路由的子路由，如果路由有一个name,或者地址一样，就会删除之前的路由信息，重新加进去这个路由。或者已经有一个与之名字相同的路由，它会先删除之前的路由；
注意：新添加的路由并不会触发新的导航
需要：

next({
    path: to.path, // 动态添加一个新的路由
    replace: true // 重定向,为了让刚刚添加的路由规则生效
});

vue-router的addRoute方法实现权限控制
getRoutes()方法是获取这个这个路由数据的数组实例，来实现一个条件控制。

router.beforeEach((to,from,next)=>{
  if(router.getRoutes().length==3 && to.path === "/admin"){
    router.addRoute({path:"/admin",name:"admin",component:()=>import(/*webpackChunkName: "admin"*/"@/views/Admin.vue")})
    next({
      path: to.path,
      replace: true
    });
  }
  next();
})
子路vue-routerspanclasstokenvue.js前端javascript

有关vue动态路由添加，vue-router的addRoute方法实现权限控制，添加根路由和子路由的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  4. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  5. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  6. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  7. Ruby 方法() 方法 - 2

    我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby​​-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

  8. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  9. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  10. ruby - Highline 询问方法不会使用同一行 - 2

    设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？ 最佳答案

随机推荐