iView 实战系列教程(21课时)_2.iView 实战教程之导航、路由、鉴权篇
在c盘创建一个iview-router的项目
、
然后使用默认的配置
跳过
添加vue-router的插件
编译我们的文件。
编译好之后,我们启动App
默认的页面就打开了。
默认两个路由一个是about界面一个是home
我们使用编辑器打开代码,用我们的iview的menu组件替换掉这两个路由
在Router这个js文件内已经配置好了这两个路由
分别对应了这两个组件
App.vue里面看到菜单是用router-link来渲染的。Router-link在渲染完成之后,会变成一个a标签。
我们把他替换成iview的menu组件
Menu标签里面嵌套MenuItem元素
查看效果:
On-select跳转
增加按钮的跳转事件
handleSelect会拿到当前菜单的name值
使用vue-router的编程式导航来跳转、
About界面
Home界面:
Iview3.0中增加的新的写法,可以大幅度的简化跳转的过程
我们直接使用to属性,
实现了同样的效果
之前的代码生成的是一个普通的li标签
Target属性:
Menu的api
https://www.iviewui.com/components/menu#API
Replace属性
再点击about链接
Replace没有保存历史记录的
页面会直接在新的tab页面打开,相当于a标签的target=”_blank”
根据当前路由自动选中对应的菜单
菜单当前是about页面。菜单是没有高亮的。、
为了使菜单高亮,我们还是需要给item加上name属性
Name仅仅作为这个菜单项的一个标识。
页面效果
当用户刷新页面的时候,这个并没有高亮。只有用户点击过菜单才会高亮
这就是我们要讲的根据当前路由自动选中当前菜单项
Active-name默认选中的菜单
刷新页面依然选中了
我们要动态的根据路由去选择对应的菜单
也就是我们动态的去设置active-name的值了、
我们在页面渲染完之后,把路由打印出来。
当我点击了about路由的时候,。About.vue里面并没有,输出console当前的路由
通过一个watch来兼容路由的变化
根据不同平台动态路由不同组件
判断当前是pc电脑还是移动端的手机,显示不同的内容 ,又同时保持同一个路由路径。
在路由级别渲染不同的组件的方法
使用isMobile变量来判断
然后我们在login的路由配置里面, 加上这个路径,如果是手机的话就有mobile的路径,如果不是就是空的
在views下面新建一个mobile的文件夹,在mobile文件夹下面新加一个login.vue.这个就是我们移动端要看的文件。
默认是pc端的
切换手机端后刷新一下页面。
转载于:https://www.cnblogs.com/wangjunwei/p/11195589.html
iView 实战系列教程(21课时)_2.iView 实战教程之导航、路由、鉴权篇相关推荐
- dispatch作用 react_「React系列」手把手带你撸后台系统(Redux与路由鉴权)
[React系列]手把手带你撸后台系统(Redux与路由鉴权) 来源:https://juejin.im/post/5d9b5ddee51d45781b63b8f7 上一篇我们介绍了系统架构,这一篇将 ...
- java search 不能使用方法_ElasticSearch实战系列三: ElasticSearch的JAVA API使用教程
前言 在上一篇中介绍了ElasticSearch实战系列二: ElasticSearch的DSL语句使用教程---图文详解,本篇文章就来讲解下 ElasticSearch 6.x官方Java API的 ...
- 【NLP实战系列】Tensorflow命名实体识别实战
实战是学习一门技术最好的方式,也是深入了解一门技术唯一的方式.因此,NLP专栏计划推出一个实战专栏,让有兴趣的同学在看文章之余也可以自己动手试一试. 本篇介绍自然语言处理中一种非常重要的任务:命名实体 ...
- MATLAB应用实战系列(七十一)-MATLAB实战应用案例:图像处理将灰度图片变成负片彩色图片转换成灰度图片
前言 本文目录 获取图片的信息 将灰度图片变成负片 彩色图片转换成灰度图片 图像噪声的添加 加10次噪声 colorbar的使用 将数据转换为图片 clc clearA是结构体名,用来存储读入的图像数 ...
- 使用Vue+vue-router+路由守卫实现路由鉴权功能实战
目录 一.本节介绍和上节回顾 1. 上节介绍 2. Vue + SpringBoot前后端分离项目实战的目录
- 「springcloud 2021 系列」Spring Cloud Gateway + OAuth2 + JWT 实现统一认证与鉴权
通过认证服务进行统一认证,然后通过网关来统一校验认证和鉴权. 将采用 Nacos 作为注册中心,Gateway 作为网关,使用 nimbus-jose-jwt JWT 库操作 JWT 令牌 理论介绍 ...
- ElasticSearch实战系列五: ElasticSearch的聚合查询基础使用教程之度量(Metric)聚合
Title:ElasticSearch实战系列四: ElasticSearch的聚合查询基础使用教程之度量(Metric)聚合 前言 在上上一篇中介绍了ElasticSearch实战系列三: Elas ...
- 【备忘】安全中国JSP+Web+企业级应用开发实战培训班 共35课时
安全中国JSP+Web+企业级应用开发实战培训班 共35课时 教程目录 [IT教程网]JSP Web 企业级应用开发实战培训第1课.rar [IT教程网]JSP Web 企业级应用开发实战培训第2课 ...
- ElasticSearch实战系列十一: ElasticSearch错误问题解决方案
前言 本文主要介绍ElasticSearch在使用过程中出现的各种问题解决思路和办法. ElasticSearch环境安装问题 1,max virtual memory areas vm.max_ma ...
最新文章
- 一步步手动实现热修复(一)-dex文件的生成与加载
- python将对象放入列表根据某个属性排升序_对python 对象列表根据某个属性排序的方法...
- 焦作师范高等专科学校计算机,焦作师范高等专科学校计算机房管理规定
- 软件测试技术教程徐光侠,软件测试技术教程徐光侠韦庆杰第十二章节自动测试工具QTP的使用.ppt...
- AutoCAD 2007快捷键大全
- 关于matlab匿名函数,求导
- C++ 后台开发面试时一般考察什么?
- 【iOS-Cocos2d游戏开发之十八】解决滚屏背景/拼接地图有黑边(缝隙)以及禁止游戏中自动锁屏问题!
- 用python做系统的感悟_《Python机器学习经典实例》学习感悟
- Pygame小游戏:玩扫雷就在瞎点的,不止你一个人。
- [POI2013]LUK-Triumphal arch【树形DP+二分答案】
- linux格式化u盘为ntfs格式,Linux上格式化U盘为NTFS格式
- 一个人最顶级的自律,是拒绝内耗
- Hadoop之图解MapReduce与WordCount示例分析
- 《算法0基础100讲》(第7讲)素数判定——866.回文素数
- 电脑装机完没有efi_win7系统eFI引导从硬盘安装的操作方法
- 【烈日炎炎战后端】消息队列(1.0万字)
- 记一个chrome自带input:-internal-autofill-selected背景色样式问题
- 前端萌新看过来了—— 0基础1小时vue入门到实战
- 九校联考-长沙市一中NOIP模拟Day2T1 旋转子段(rotate)
热门文章
- 100个网络基础知识,赶紧收藏吧!
- 软件:分享9款实用电脑软件,值得看一看
- 操作系统:166个Linux实用命令,太全了!
- jio文件 久其_功能强大的Windows文件管理器工具
- python fsolve说明_Python fsolve()抱怨形状.为什么?
- 条件随机场 python_用条件随机场做网络小说命名实体识别
- an导入html5,H5-FLASH:AN HTML5-BASED FLASH RUNTIME
- mysql 判断字段为null表示 false 其它为true_日拱一卒,MySQL数据库 常用SQL优化技巧 十一式...
- ubuntu18 常用命令
- 拟态防御_纯素食汉堡的拟态