vue 横屏导航菜单栏

引用[1]:根据提供的代码，这段代码是用于在Vue中实现横屏导航菜单栏的功能。具体实现步骤如下：
1. 首先，通过点击菜单项触发chooseNav方法，获取当前点击元素的位置信息和屏幕的宽度信息。
2. 判断当前点击元素的左边距离和右边距离是否超过屏幕一半的宽度。
3. 如果超过了屏幕一半的宽度，则将滚动条的滚动距离设置为当前点击元素的位置减去屏幕一半的宽度。
4. 这样就可以实现将选中的菜单项移动到屏幕中间的效果。

引用[2]:根据提供的代码，这段代码是Vue中实现横屏导航菜单栏的路由配置和页面布局的示例。其中，左侧导航菜单的路由配置放在了Home组件下面注册，并使用了饿了么页面布局的第四个布局样式。点击二级菜单后进行页面刷新时，所选的二级菜单仍然会保持高亮状态。

引用[3]:根据提供的代码，这段代码是Vue中实现横屏导航菜单栏的父组件示例。在父组件中引入了子组件swiperTab，并通过props传递了导航菜单的数据。当点击导航菜单项时，通过tabInfo方法将当前菜单项的信息传递给父组件。

综上所述，以上引用内容提供了Vue中实现横屏导航菜单栏的代码示例和相关说明。