router vue 回到顶部_小猿圈HTML5学习之基于iview的router常用控制方式
对于互联网发展的今天,IT行业慢慢变成大多数年轻人发展的目标,不仅前景好,薪资也是越来越高的,而web前端是行业中需要的技术,也促进了大多数朋友在学习html5,今天小猿圈讲师给你分享基于iview的router常用控制方式,在学的过程中不浪费时间少走弯路。
1、iview的router控制需求
最近在使用iview框架写项目,遇到了一些路由控制上的问题,解决过程中也有一些心得,故在此记录下来.
每个项目在开发时,对于类似tags(标签页)的控制需求都不尽相同,故以下先列出本文所述项目对标签页的控制要求(如有不同需求,本文当也可提供一些思路):
对于同名(name)的路由标签页,不能打开多个.譬如说从商品列表中打开商品展示标签页,如果已经有在打开的商品编辑页面,则替换之.新打开的,未保存,已保存的标签页,同时只能存在一个(即不同params相同name的route只能有一个);
替换掉一个新的页面时,通过切换的方式切换回来(先切到其他标签页再切换回来),仍是原来页面的内容(即实际记录的params在替换后应变化).类似的情况,还应包含单据从未保存到已保存,以及保存并新增功能;
2、基于vue的router控制
iview是基于vue的框架,故vue本身自带的router控制方法是必然可行的.
vue变更路由的常用方式参考以下(该方法在官方api中有更详细的介绍):
//变更当前路由(有历史记录,建议使用此方式)
this.$router.push({
name:'routerName',
params:routerParam
})
//变更当前路由(无历史记录)
this.$router.replace({
name:'routerName',
routerParam
})
官方路由变更确实可以正常打开标签页,但在实现1中所提到的各种需求的时候,就有些不满足需求了.为此,需要参考3中,如何基于iview的outer控制.
3、基于iview的router控制
iview在控制路由的时候,使用vuex中的app.js来记录标签页路由信息,如果对vuex还是很了解的话,可以通过这篇博文来先打一下基础.
3.1如何实现需求1.1
想要实现不同params相同name的route在iview中只能有一个,关键是改变iview对路由相等的判断方法,即'/src/libs/util.js'里的routeEqual方法:
/**
* @description 根据name/params/query判断两个路由对象是否相等
* @param {*} route1 路由对象
* @param {*} route2 路由对象
*/
export const routeEqual = (route1, route2) => {
return route1.name === route2.name
// 此处改变相同路由的判断方式,改为name相同即认为相同
// const params1 = route1.params || {}
// const params2 = route2.params || {}
// const query1 = route1.query || {}
// const query2 = route2.query || {}
// return (route1.name === route2.name) && objEqual(params1, params2) && objEqual(query1, query2)
}
这里稍微解释下(如果不关注原因,可以直接看3.2).当改变路由时,'srccomponentsmainmain.vue'作为近乎顶层的组件控制着近乎所有的全局逻辑,其中就有对路由的监控:
...
<side-menu
accordion
ref="sideMenu"
:active-name="$route.name"
:collapsed="collapsed"
@on-select="turnToPage"
:menu-list="menuList"
>
...
//此方法隶属于methods,用以监控side-menu的选择事件,即平时从左侧菜单打开标签页的逻辑
turnToPage (route) {
let { name, params, query } = {}
if (typeof route === 'string') name = route
else {
name = route.name
params = route.params
query = route.query
}
if (name.indexOf('isTurnByHref_') > -1) {
window.open(name.split('_')[1])
return
}
this.$router.push({
name,
params,
query
})
},
...
watch: {
// 检测route的变化
$route (newRoute) {
const { name, query, params, meta } = newRoute
this.addTag({
route: { name, query, params, meta },
type: 'push'
})
this.setBreadCrumb(newRoute)
this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
this.$refs.sideMenu.updateOpenName(newRoute.name)
}
},
...
从以上代码可推测出,main.vue通过turnToPage方法实现打开标签页的逻辑,但方法内部并没有体现便签页显示效果变化(包含内部数据变化,以下同)的逻辑,这是由于显示效果变化的逻辑,由对$router的监控实现.
这样,不止从左侧菜单打开新标签页可以实现显示变化效果,其他只要使用vue的原版push等方法改变router的方法,均可监测到.
逐步查看下各个方法,其中影响当前标签页显示效果的,是'src/store/module/app.js'的addTag方法.
addTag (state, { route, type = 'unshift' }) {
let router = getRouteTitleHandled(route)
if (!routeHasExist(state.tagNavList, router)) {
if (type === 'push') state.tagNavList.push(router)
else {
if (router.name === homeName) state.tagNavList.unshift(router)
else state.tagNavList.splice(1, 0, router)
}
setTagNavListInLocalstorage([...state.tagNavList])
}
},
尽管方法内部仍调用了很多,其中一个很重要的判断,就是routeHasExist(路由是否存在),这个方法也是判断是否为相同标签页的一个关键节点(该方法同样在util.js):
/**
* 判断打开的标签列表里是否已存在这个新添加的路由对象
*/
export const routeHasExist = (tagNavList, routeItem) => {
let len = tagNavList.length
let res = false
doCustomTimes(len, (index) => {
if (routeEqual(tagNavList[index], routeItem)) res = true
})
return res
}
明显可以看出,这个方法内调用routeEqual,就是用以判断是否为相同路由的实际方法(当然是通过比较新路由与已有路由进行比较),如此,仅需改变routeEqual即可.
以防万一,全局搜索下调用这个routeEqual的所有方法,发现所有调用的地方再routeEqual在改变后不会出现新的问题.
3.2如何实现需求1.2
在进行3.1的操作后,问题得到了部分解决.余下的问题在于需求1.2没有得到实现和解决.
首先是,如何实现从列表中打开或新建的,替换原来的标签页,在来回切换后不会回到原来的标签页.只需在app.js中注册改变标签页参数的方法:
// 变更指定路由的参数
changeTagParams (state, route) {
let routeOldIndex = state.tagNavList.findIndex(m => routeEqual(m, route))
if (routeOldIndex !== -1) {
let routeOld = state.tagNavList[routeOldIndex]
routeOld.params = route.params
state.tagNavList.splice(routeOldIndex, 1, routeOld)
setTagNavListInLocalstorage([...state.tagNavList])
}
},
然后在main.vue中对$route的监控最后引用即可.
watch: {
// 检测route的变化
$route (newRoute) {
const { name, query, params, meta } = newRoute
this.addTag({
route: { name, query, params, meta },
type: 'push'
})
this.setBreadCrumb(newRoute)
this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
this.$refs.sideMenu.updateOpenName(newRoute.name)
// 增加路由参数变更环节
this.changeTagParams(newRoute)
}
},
其次,如果出现像保存并新增,或者从未保存到已保存,这两种情况来回切换后不会回到原来的情况.
保存并新增,关键是"新增"效果:
// 清空数据,该方法在保存后调用
clearData () {
//该部分是用来清除当前route的参数
this.$router.push({
params: Object.assign(this.$route.params, { id: undefined })
})
//这部分代码是用来清空当前页面内容,每个模块都不尽相同,不必模仿
this.mOtherExpense = JSON.parse(JSON.stringify(this.mOtherExpenseInitial))
this.tableData = [{}]
this.loadCode()
this.mOtherExpense.openingDate = new Date()
},
从未保存到已保存,关键同样是如何让route记住新的id(或其他参数):
// 设置路由id,该方法在第一次保存后调用
setData (id) {
//这里的id是保存后从后台传来的新id
this.$router.push({
params: Object.assign(this.$route.params, { id })
})
}
文中已将本人常用的iviewrouter控制方式提出,或有未涉及者,根据以下了解大概也可解决:
app.js中的state.tagNavList是标签页中显示的标签集合;如果要改变一些内容,main.vue中对$route的监控是事件发起的开端,可考虑从这里修改;
以上就是小猿圈web前端讲师对于基于iview的router常用控制方式的介绍,记住一定要练习,多学多看多练这才是学习一门新技术好的开始,如果没有系统的视频可以观看小猿圈,里面有更完善更全的视频。
router vue 回到顶部_小猿圈HTML5学习之基于iview的router常用控制方式相关推荐
- 小猿圈python金角大王_小猿圈python学习-基本数据类型
小猿圈python学习-基本数据类型 2019-04-24 11:16:14 1点赞 6收藏 0评论 什么是数据类型? 我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大, ...
- 小猿圈python视频_小猿圈分享学习Python的最佳方式
原标题:小猿圈分享学习Python的最佳方式 python现在是世界上功能最多的编程语言之一,可以是用Python编辑应用程序,游戏.算法程序.还可以编程一个机器人,学习Python可以担任软件工程师 ...
- java ftp获取文件名的方法_小猿圈Java学习-URL地址的组成格式
URL的全称是Uniform Resource Locator,意思是统一资源定位符,俗称网络地址或网址.网络上的每个文件及接口,都有对应的URL网址,它规定了其他设备如何通过一系列的路径找到自己,犹 ...
- 小猿圈python视频_小猿圈python学习-格式化打印
现有一练习需求,问用户的姓名.年龄.工作.爱好 ,然后打印成以下格式 ------------ info of Alex Li -----------Name : Alex Li Age : 22 j ...
- java length()函数_小猿圈介绍java函数式编码结构及优势
对于java大家都已经不陌生了吧,今天小猿圈Java讲师就分享一篇关于java函数式编码结构及优势的知识点,希望对于学习java的你有一定的帮助,想学习就需要积累. 探讨三种下一代JVM语言:Groo ...
- mysql 保留5位小数_小猿圈分享-MySQL保留几位小数的4种方法
今天小猿圈给大家分享的是MySQL使用中4种保留小数的方法,希望可以帮助到大家,让大家的工作更加方便. 1 round(x,d) 用于数据x的四舍五入, round(x) ,其实就是round(x,0 ...
- bigdecimal除法保留4位小数_小猿圈分享-MySQL保留几位小数的4种方法
今天小猿圈给大家分享的是MySQL使用中4种保留小数的方法,希望可以帮助到大家,让大家的工作更加方便. 1 round(x,d) 用于数据x的四舍五入, round(x) ,其实就是round(x,0 ...
- vue 传参 微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结 最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
- th:text为null报错_小猿圈web前端之vue-cli项目打包完成后运行文件路径报错问题
学习前端的小伙伴越来越多,问题也就越多,前面基础部分还好一些,特别是一到框架的时候,难住了一大部分人,今天小猿圈web前端讲师就为大家总结了vue-cli项目打包完成后运行文件路径报错问题,有兴趣的小 ...
最新文章
- Mysql5.5配置主从复制
- RHEL5 Silent方式安装Oracle 11gR2指南
- Android 的用户层 uevent处理机制
- QT学习:读写二进制文件
- ubuntu declare
- 启动rrt什么意思_python学习第144课--创建虚拟机、设置虚拟机参数以及启动虚拟机...
- 【常见笔试面试算法题12续集三】动态规划算法案例分析3 LIS练习题(最长上升子序列)
- C++:MAC安装Boost库文件并且使用CLion开发
- JavaScript历史与ECMAScript
- Web开发小结 - 2
- javascript 内置对象学习 笔记:
- Jekyll搭建lanmps.com站点
- 三角函数常见基本公式
- IntelliJ IDEA优化内存配置提高启动和运行速度
- 2.2析取范式与合取范式
- 清除恶意主页www.7939.com
- android 横竖屏幕切换
- 电脑拆机后,遇到的开机非常慢的问题解决
- 中国人工智能行业市场供需与战略研究报告
- Win10系统win+shift+s快捷键截图存放路径
热门文章
- 【unit7 unit9】cifs网络文件系统访问;vsftp服务
- ThinkCMF变量输出+使用函数
- git 提交代码的步骤
- .vimrc示例文件
- 045、JVM实战总结:动手实验:自己动手模拟出对象进入老年代的场景体验一下(上)
- 2018清华计算机类专业录取分数线,清华大学2018-2019年各省各专业录取分数线
- mysql 重置表索引_MySQL管理表和索引
- confluence统计用户文章_首次,Flink公众号公开一些后台统计数据
- 第三方服务-极光推送
- flutter图标按钮_Flutter 中的常见的按钮组件 以及自 定义按钮组件