🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### Vue中使用历史焦点 这部分较多的配置在应用端,vue-epg 负责返回焦点的xpath,并提供方法 this.$service.getEleByPath 来查找元素 ### 原理 vue-epg 的焦点始终只有一个,不会出现多焦点、重复焦点的问题。焦点(this.$service.pointer)为只读属性,不可被赋值。 当页面离开后,自动记录当前焦点的位置,通过 **this.$service.getPointerPosition()** 来获取当前焦点的 xpath。 将xpath 存储到状态机(或其他自定义的存储中),回到页面时取出,通过**this.$service.move()** 来移动到之前的焦点。 vue-epg 提供方法通过xpath获取元素 **this.$service.getEleByPath(xpath)** , *关于 xpath 请阅读 [文档](http://www.w3school.com.cn/xpath/index.ASP)* #### **Example** ~~~ let el = this.$service.getEleByPath('/div/div/div[3]/div[5]/') this.$service.move(el) ~~~ 由于 beforeRouteLeave 不能知道是否是返回到的页面还是离开页面,所以需要添加 isBack 来判断 epg 提供 Back 方法来监听页面返回操作,在返回方法中设置isBack=true 建议:结合Vuex来记录焦点状态