锚点导航锚点导航，又称为锚点滚动效果，通过链接锚点来实现内部页面之间的跳转。当用户点击页面上的某一个链接时，页面会自动滚动到对应的位置，从而实现导航的效果。
在vue中实现锚点导航有两种方式，一种是使用vue router，通过配置路由的方式实现；另一种是使用vue指令，在模板中直接调用指令的方式实现。这里我们以vue指令为例进行介绍。
（1）定义锚点
在页面中需要跳转的位置处添加锚点，如下所示：
<div id="article1"></div>
（2）定义导航链接
在需要实现导航的位置添加链接，如下所示：
<router-link to="#article1">文章1</router-link>
（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指令来调用导航效果，如下所示：
<a href="#" v-scroll-to="'article1'">文章1</a>
侧边栏导航侧边栏导航是一种比较常见的网站导航方式，它将导航条放置在页面的侧边栏，并以列表的形式展现导航项。
在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组件作为侧边栏导航项，如下所示：
<el-aside> <el-menu default-active="2" class="el-menu-vertical-demo" :router="true" :collapse="collapse" background-color="#edf0f5" text-color="#000" active-text-color="#409eff"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span slot="title">导航一</span> </template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="/index1-1">选项1</el-menu-item> <el-menu-item index="/index1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组二"> <el-menu-item index="3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="4"> <template slot="title">选项4</template> <el-menu-item index="/index1-3">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-menu"></i> <span slot="title">导航二</span> </template> <el-menu-item index="/index2-1">选项1</el-menu-item> <el-menu-item index="/index2-2">选项2</el-menu-item> <el-menu-item index="/index2-3">选项3</el-menu-item> </el-submenu> <el-submenu index="3"> <template slot="title"> <i class="el-icon-document"></i> <span slot="title">导航三</span> </template> <el-menu-item index="/index3-1">选项1</el-menu-item> <el-menu-item index="/index3-2">选项2</el-menu-item> <el-menu-item index="/index3-3">选项3</el-menu-item> </el-submenu> </el-menu></el-aside>
（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})
回到顶部导航回到顶部导航是一种比较简单的导航方式，在页面底部添加一个固定位置的返回顶部按钮，当用户在页面中滚动时，可以随时点击按钮返回页面顶部。
在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组件，如下所示：
<back-to-top></back-to-top>
通过以上三种方式，我们可以在vue项目中实现不同的页面导航方式，为用户提供更好的使用体验。在实际开发中，具体采用哪种导航方式需要根据具体情况进行判断，以达到最佳的用户交互效果。
以上就是vue页面比较长怎么导航的详细内容。