vue实现侧边栏导航效果

本文实例为大家分享了vue侧边栏导航的具体代码,供大家参考,具体内容如下

最终效果

点击下一个导航,上一个导航自动收回

实现代码

1.下载vue-router

npm install vue-router --save-dev

2.在main.js中引入

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router) // 引入路由

3.在components中新建组件

3.1 agencySearch.vue组件

代码:

<template>
 <div>
  直属下线代理查询
 </div>
</template>

3.2 agencySet.vue组件

代码

<template>
 <div>
  直属下线代理设置
 </div>
</template>

3.3 financialIncome.vue组件

代码

<template>
 <div>
  财务收益数据报表
 </div>
</template>

4.在router下的index.js中引入组件,搭配路由

//4.1引入组件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home' // 主页
import agencySearch from '@/components/agencySearch' // 直属下线代理查询
import agencySet from '@/components/agencySet' // 直属下线代理设置
Vue.use(Router)
//搭配路由
export default new Router({
 mode: 'history',
 scrollBehavior: () => ({
 y: 0
 }),
 routes: [
 {
  // 主页
  path: '/',
  component: Home,
  name: '代理事物',
  iconCls: 'el-icon-message',
  children: [{
  path: '/agencySearch',
  component: agencySearch,
  name: '直属下线代理查询',
  hidden: true
  },
  {
  path: '/agencySet',
  component: agencySet,
  name: '直属下线代理设置'
  }]
 },
 {
  // 主页
  path: '/',
  component: Home,
  name: '财务报表',
  iconCls: 'el-icon-menu',
  children: [{
  path: '/financialIncome',
  component: financialIncome,
  name: '财务收益数据报表',
  hidden: true
  }]
 }]
})

5.在主页Home组件中搭配导航以及路由出口

在el-menu标签中一定要有 unique-opened 和 router属性,在el-menu-item中index属性值等于在router下index.js中配好的路由名字

这个是从element官网截取的

<el-row class="tac">
 <el-col :span="24">
 <el-menu
  default-active="1"
  class="el-menu-vertical-demo"
  unique-opened
  router>
  <el-submenu index="1">
  <template slot="title">
   <i class="el-icon-message"></i>
   <span>代理事务</span>
  </template>
  <el-menu-item-group>
  <template slot="title"></template>
  <el-menu-item index="/agencySearch">直属下线代理查询</el-menu-item>
  <el-menu-item index="/agencySet">直属下线代理设置</el-menu-item>
  </el-menu-item-group>
  </el-submenu>
  <el-submenu index="2">
  <template slot="title">
   <i class="el-icon-menu"></i>
   <span>财务报表</span>
  </template>
  <el-menu-item-group>
  <template slot="title"></template>
  <el-menu-item index="/financialIncome">财务收益数据报表</el-menu-item>
  </el-menu-item-group>
  </el-submenu>
 </el-menu>
 </el-col>
</el-row>

路由出口-右侧显示部分

<el-col :span="24" class="content-wrapper">
 <transition name="fade" mode="out-in">
  <router-view></router-view>
 </transition>
 </el-col>

结语:因为是从写好的代码中截取的一部分,可能跑不起来,请见谅,我能理解的原理部分都写在这里啦。

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue设置导航栏、侧边栏为公共页面的例子

    首先,项目结构如下: 想要让导航栏.侧边栏变为公共页面,则要在App.vue页面中加入.假设已经有了Header.vue和Left.vue,这里就不贴出来了,App.vue代码如下: <template> <div id="app"> <!-- 其他页 --> <el-container > <el-header> <!-- 导航栏 --> <header-nav></header-nav>

  • 前端Vue项目详解--初始化及导航栏

    一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project name luffy_project ? Project description A Vue.js project ? Author hqs ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your cod

  • vue实现nav导航栏的方法

    每一个网页项目都少不了导航栏,通过原始的方法基本上都是可以写出来的.但是要写出代码量少,冗余度低的代码就要动脑子思考一下了. 最近写了一个百度地图的项目,要求底部有一个导航栏.具体如下图: 首先,拿到了底部导航栏的所有图标图片,图片都有两种.灰色的代表未选中,选中的用带样色的图片替换. 先看一下,组件中 html结构:通过vue提供的v-for方法,进行遍历显示footNav这个数组.数组里边存放着{title:"银行",url:" ",url1:" &q

  • vue实现侧边栏导航效果

    本文实例为大家分享了vue侧边栏导航的具体代码,供大家参考,具体内容如下 最终效果 点击下一个导航,上一个导航自动收回 实现代码 1.下载vue-router npm install vue-router --save-dev 2.在main.js中引入 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 引入路由 3.在components中新建组件 3.1 agencySearch.vue组件 代码

  • jquery仿京东侧边栏导航效果

    本文实例为大家分享了jquery仿京东侧边栏导航的具体代码,供大家参考,具体内容如下 样式代码 <style> *{ padding: 0; margin: 0; border: 0; } body{ height: 2000px; } .right_ng{ width: 40px; height: 100%; position: absolute; position: fixed; right: 0px; background: #666666; } .sign{ width: 40px;

  • vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航

    早就实现了功能,但是发现点击的时候,选中的菜单项背景色会变白,周五时候仔细观察了一下,发现并不是调整样式的问题,而是选项没有被选中,于是好好研究了一下组件递归这块,总结记录一下心路历程 一.概念 递归:递归其实说白了,就是自己调用自己,样子就像是套娃一个套一个的,小时候玩过一个游戏汉诺塔就是利用的递归原理: 函数递归:函数利用函数名还调用自己 组件递归:所以组件递归利用的是vue组件中的name属性来实现的 二.需求 实现可折叠动态渲染多级侧边栏导航 三.分析 1.观察到侧边栏导航是一级一级的,

  • vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)

    先给大家展示下效果图,感觉还不错请参考实现代码: 使用技术:vue2.0 webpack vue-touch 一些简单的javascript; (注意:vue-touch 使用的是2.0.0版本 需要与vue2.0.0兼容) vue-touch(地址:https://github.com/vuejs/vue-touch 注意是next 分支) 左侧导航可滑动(右侧视图窗因为和左逻辑一样 就没写) var VueTouch = require('vue-touch') Lib.Vue.use(Vu

  • vue实现二级导航栏效果

    本文实例为大家分享了vue实现二级导航栏效果展示的具体代码,供大家参考,具体内容如下 实现如下功能: 在.vue文件中,template中的内容如下: <template> <div id="app"> <nav class="sidebar"> <ul class="menu"> <li v-for="(navList,index) in navLists" :key=&

  • vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果的代码

    vant文档:Vant 2 - Mobile UI Components built on Vue 实现效果: 代码实现: 1.navbar.tabbar顶部导航过渡效果.颜色过渡: <div class="mallHead"> <van-nav-bar :title="titleName" fixed @click-left="onClickLeft" :style="style" safe-area-in

  • vue实现三级导航展示和隐藏

    本文实例为大家分享了vue实现三级导航展示和隐藏的具体代码,供大家参考,具体内容如下 需求描述: 要实现侧边栏三级导航的显示和隐藏.点击其中一个一级导航,展示该一级导航的二级导航,再点击关闭该二级导航.一级导航的其他项,展开二级导航.关闭其他一级导航的二级导航. 效果如下: 代码: <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"

  • Vue实现侧边导航栏于Tab页关联的示例代码

    目录 技术栈 效果 分析 技术栈 侧边栏用 Antdtab使用element 效果 <template> <div class="main-card"> <el-row> <el-col :span="3"> <div class="menu-all"> <div class="menu-head"> <span class="menu-h

  • vue实现中部导航栏布局功能

    接下来是中部导航栏.我们看到这里的头像动画,和中部导航栏定位都是跟鼠标滚动有关的.我们先将布局实现一下.这里是要求在页面上部分滚动范围内,导航栏一直在div的上部,随着鼠标的滚动而改变位置.到下部分滚动范围,导航栏就一直固定到页面的上部分. 这里需要注意两个地方 这里需要一个覆盖不了的区域,可以给人一种更好开关屏的感觉.而且中部导航栏下方区域的内容,在下滑的时候不能出现在这个区域. 一定要注意 尽可能的少进行DOM操作,这样是非常影响性能的 ! 监听鼠标滚动事件 private fixedFla

  • vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

    有这样一个场景:如果你在登录之前输入了http://localhost:8080/oauth2-mgm-app/#/userManage,想进入userManage页面,但是由于没有登录,系统是不会让你进入这个页面,之后会被定向到login页面.但是在登录之后,认为你有这个权限了,就需要重新定向到userManage页面.大致流程图如图1所示: 图1 登录后跳转到未登录前指定页面流程图 在vue-route的官方文档里其实有给到过这个demo,官方文档链接在此:https://router.vu

随机推荐