vue页面比较长如何导航

（2）定义导航链接

在需要实现导航的位置添加链接，如下所示：

文章1

（3）定义滚动指令

在Vue实例中定义自定义指令v-scroll-to，使用scrollTop函数实现页面的滚动效果，如下所示：

Vue.directive('scroll-to', {
  bind: function (el, binding) {
    el.addEventListener('click', function () {
      document.documentElement.scrollTop = document.getElementById(binding.value).offsetTop
    })
  }
})

（4）调用指令

在模板中使用v-scroll-to指令来调用导航效果，如下所示：

文章1

2. 侧边栏导航

侧边栏导航是一种比较常见的网站导航方式，它将导航条放置在页面的侧边栏，并以列表的形式展现导航项。

在Vue中实现侧边栏导航也有两种方式，一种是手动编写导航栏组件；另一种是使用Vue UI框架（如Element UI、Bootstrap Vue等）提供的导航栏组件。我们这里以Element UI为例进行介绍。

（1）安装Element UI

在Vue项目中使用Element UI前，需要先安装Element UI，可以通过如下命令进行安装：

npm install element-ui -S

（2）引入Element UI组件

在Vue实例中引入element-ui组件，如下所示：

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

（3）添加侧边栏组件

使用el-aside组件作为侧边栏容器，使用el-menu组件作为侧边栏导航项，如下所示：

  
    
      
        
        导航一
      
      
        分组一
        选项1
        选项2
      
      
        选项3
      
      
        选项4
        选项4-1
      
    
    
      
        
        导航二
      
      选项1
      选项2
      选项3
    
    
      
        
        导航三
      
      选项1
      选项2
      选项3
    
  

（4）配置路由

除了添加组件外，还需要配置路由，如下所示：

const routes = [
  { path: '/index1-1', component: Index1 },
  { path: '/index1-2', component: Index1 },
  { path: '/index1-3', component: Index1 },
  { path: '/index2-1', component: Index2 },
  { path: '/index2-2', component: Index2 },
  { path: '/index2-3', component: Index2 },
  { path: '/index3-1', component: Index3 },
  { path: '/index3-2', component: Index3 },
  { path: '/index3-3', component: Index3 },
]
const router = new VueRouter({
  routes
})

3. 回到顶部导航

回到顶部导航是一种比较简单的导航方式，在页面底部添加一个固定位置的返回顶部按钮，当用户在页面中滚动时，可以随时点击按钮返回页面顶部。

在Vue中实现回到顶部导航可以使用两种方式，一种是手动编写组件实现，另一种是使用Vue插件来实现。这里我们以使用Vue插件的方式进行介绍。

（1）安装Vue插件

在Vue项目中使用回到顶部插件前，需要先安装插件，可以通过如下命令进行安装：

npm install vue-backtotop --save

（2）引入Vue插件

在main.js中引入Vue插件，如下所示：

import VueBackToTop from 'vue-backtotop'

Vue.use(VueBackToTop)

（3）添加回到顶部组件

在需要添加回到顶部功能的页面中使用back-to-top组件，如下所示：

到此，关于“vue页面比较长如何导航”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！