美文网首页
iView的导航、路由、鉴权

iView的导航、路由、鉴权

作者: 阿清哪去了 | 来源:发表于2018-10-27 16:02 被阅读624次

导航跳转方式

  • iVIew组件中路由跳转类似于view-router,可以直接使用to来进行跳转


    使用to进行跳转
  • 或者采用编程式导航:


    编程式导航跳转

二者区别:
使用to进行跳转,跳转的菜单会变成一个a标签,而使用编程式导航的方式进行跳转,跳转的菜单部分会变为一个li标签。
iView3.0对于菜单操作还增加了对键盘的一个操作,按住ctrl点击路由跳转,会新打开一个页面。

根据当前路由自动选择对应菜单

动态获取当前路由的值,并通过它来设置对应菜单高亮

active-name等于菜单项的name时,高亮

在路由级别对页面做鉴权

通过路由守卫来设置在路由级别的鉴权,当路由进行跳转的时候,拦截并判断并执行业务,之后再决定是否跳转

  • 设置路由守卫,设置路由的meta信息(这里我们给登录页面不进行鉴权,不设置meta信息,给admin设置鉴权)


    路由设置meta信息用以鉴权
    我们先把设置的meta信息打印出来看看
    登录不鉴权未打印出任何东西,admin则打印出了我们设置的meta
  • 因此,我们判断meta中的信息,将路由拦截后进行处理(这里假设我们把登录信息存储在localStorage中)


    进入admin,先鉴权,未登录则跳转登录

根据不同平台动态路由不同组件

即使现在移动端已经做了很不错的响应式,但任然存在一些问题达不到我们想要的效果。因此我们可以通过不修改路由的方式来切换不同的页面以应对多端访问。在路由级别动态的渲染不同页面。

  • 我们首先需要通过api判断当前的访问平台


    判断访问端类型,若为移动端就修改path变量
  • 在路由路径上进行一个动态的修改


    path的值会根据访问的设备进行动态的修改
  • 我们再创建一个mobile的路径,里面存放移动端的页面。这样就可以在路由级别做到多端多页面的展示。

相关文章

  • iView的导航、路由、鉴权

    导航跳转方式 iVIew组件中路由跳转类似于view-router,可以直接使用to来进行跳转使用to进行跳转 或...

  • 04-15动态路由的实现与优化

    Vue中后台鉴权的另一种思路 - 动态路由的实现与优化 鉴权-前端路由 VS 鉴权-动态路由 前端路由鉴权相信只要...

  • react 路由鉴权判断

    路由检测: 通过cookie进行路由鉴权判断(是否登录), 这里用到redux, 其实可以不用;

  • Angular实现SPA

    指定容器 配置路由词典 路由跳转 前进与后退 路由传参 路由嵌套 路由守卫(控制一个路由中的组件是否能够访问鉴权、...

  • 金融支付基础交易

    金融支付的基础交易主要包括鉴权、路由、代收、代付、清算、结算。 鉴权:对客户提供的个人和银行卡信息的真实性进行要素...

  • 谈谈鉴权与授权

    目录 鉴权场景实现 授权场景实现 鉴权 鉴权(authentication): 你是谁 场景 实现 关于鉴权的示例...

  • 云调用,小程序鉴权-方案

    目录:一、无处不在的鉴权 现实生活中的身份鉴权方法 简单的密码鉴权体系二、鉴权优化 频繁的鉴权场景下的优化方案 第...

  • 常见的鉴权方式,你真的不想知道吗

    主要内容 鉴权的作用 几种常见的鉴权 各个鉴权的适用场景 一、什么是鉴权 鉴权是指验证用户是否有权利访问系统的行为...

  • Laravel框架 之 Passport

    本文的示例代码参考passport 目录 开始 passport 令牌 路由 鉴权 开始 生成数据库 填充表假数据...

  • Agent Telegraf Plugin inputs.log

    初衷 系统中使用lua扩展Nginx,实现Client请求Server的统一接入服务(鉴权,路由)。监控中心会需要...

网友评论

      本文标题:iView的导航、路由、鉴权

      本文链接:https://www.haomeiwen.com/subject/tphdtqtx.html