vue之001-基本工作上遇到的问题:监听页面是否在刷新操作

ini 复制代码
## 前言:大家可能会遇到一个这样的问题,在监听页面中,是否有(如刷新,关闭等操作),刚好遇到有此类项目上的问题!!
### 问题:遇到了一个场景,当在浏览器(pc)上面按f5之类刷新 页面时,如果底部的tarbbar是自定义的话,会回到默认的第1个,解决方案如下:
[ vue-router的beforeRouteEnter的文档说明 ]([导航守卫 | Vue Router (vuejs.org)](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB))

```
//利用vuerouter中的api方法监听页面是否在刷新操作

beforeRouteEnter(to, from, next) {
    next(vm = >{
        vm.tabbarList.filter((item, index) = >{
            if (item.path === to.fullPath) {
                vm.currentItem = index vm.currentPath = to.fullPath
            }
        })
    })
},

```
### 注意: 注意:在beforeRouteEnter中,无法直接使用this方法,如果使用,则报错,请在next()方法中传入一个参数,去处理vue实例中的变量,方法等,解决方案就在上面的代码中。


#### 结束:记录下,以方便自己和遇到此类问题的朋友(大佬可以略过)
相关推荐
konh几秒前
React Native 自定义字体导致 Text / TextInput 文本垂直不居中的终极解决方案
前端·react native
奔赴_向往1 分钟前
跨域问题深度剖析:为何CORS设置了还是报错?
前端
纯爱掌门人25 分钟前
别再死磕框架了!你的技术路线图该更新了
前端·架构·前端框架
丁点阳光34 分钟前
Ract Router v7:最全基础与高级用法指南(可直接上手)
前端·react.js
~无忧花开~44 分钟前
Vue.config.js配置全攻略
开发语言·前端·javascript·vue.js
w***Q3501 小时前
前端跨平台开发工具,Tauri与Electron
前端·javascript·electron
前端一课1 小时前
H5 WebView 文件下载到手机中(仅安卓与 iOS)
前端
天外来物2 小时前
element-plus主题配置及动态切换主题
前端·css·element
晴殇i2 小时前
这个前端工具杀疯了!发布一周狂揽 10k Star,Snapchat 开源框架重新定义跨平台
前端·程序员
孟祥_成都3 小时前
打包票!前端和小白一定明白的人工智能基础概念!
前端·人工智能