vue 挂载路由到头部导航的方法


Posted in Javascript onNovember 13, 2017

路由是写好了,但正确的切换路由方式不应该是我们在地址栏里面输入地址,有追求的方式是点击头部的导航菜单来切换,就像这样

vue 挂载路由到头部导航的方法

我们点击上面的发现、关注、消息就切换路由导航

我们先把头部的导航写好

打开header.vue

先把vue组件的基本格式写好

vue 挂载路由到头部导航的方法

然后开始布局写头部

这里很不好意思,我一直以为头部的header.vue是引入了的,实际上并没有........

打开app,vue重新编写一下

app.vue 代码:

<template>
 <div id="app">
  <!-- element-ui 容器布局 -->
  <el-container>
   <!-- 头部 -->
   <el-header>
    <!-- 头部组件渲染 -->
    <header-ly></header-ly>
   </el-header>

   <!-- 中间主要区域容器 -->
   <el-container>
    <!-- 添加一个element-ui内置的过渡动画 -->
    <transition name="el-zoom-in-center">
     <!-- 通过路由渲染不同内容的页面 -->
     <router-view/>
    </transition>
   </el-container>

   <!-- 底部 -->
   <el-footer>
    <!-- 底部组件渲染 -->
    <footer-ly></footer-ly>
   </el-footer>

  </el-container>
 </div>
</template>

<script>
// 导入组件
import HeaderLy from '@/components/header'
import FooterLy from '@/components/footer'
export default {
 name: 'app',
 components: {
  HeaderLy,
  FooterLy
 }
}
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}
</style>

编写头部header.vue,这里的代码基本上可以从element-ui官网上直接copy,地址:http://element-cn.eleme.io/#/zh-CN/

<template>
 <el-row>
  <!-- 左边logo -->
  <el-col :span="4" class="logo">
   <img src="../assets/logo.png" alt="">
  </el-col>
  <!-- 中间导航区域 -->
  <el-col :span="16">
   <el-menu
    :default-active="activeIndex2"
    class="menu"
    router
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-submenu index="2">
     <template slot="title">我的工作台</template>
     <el-menu-item index="2-1">选项1</el-menu-item>
     <el-menu-item index="2-2">选项2</el-menu-item>
     <el-menu-item index="2-3">选项3</el-menu-item>
    </el-submenu>
    <el-menu-item index="3"><a href="https://www.ele.me" rel="external nofollow" target="_blank">订单管理</a></el-menu-item>
   </el-menu>
  </el-col>
  <!-- 右边用户信息以及登陆注册 -->
  <el-button-group>
   <el-button type="danger" size="small" round >login</el-button>
   <el-button type="success" size="small" round >regin</el-button>
  </el-button-group>
 </el-row>
</template>
<script>
export default {
 // ...
}
</script>
<style scoped>

</style>

这个时候浏览器中是这样的

vue 挂载路由到头部导航的方法

样子很丑,但这不是重点,我们点击导航的时候,他直接跳到的是
<el-menu-item index="2-1">xxxxxx<el-menu-item>,这里面的index,所以最笨的办法就是改index的值就行了,但这样就不够灵活了....

一般写导航的办法是这样的

<template>
 <el-row>
  <!-- 左边logo -->
  <el-col :span="4" class="logo">
   <img src="../assets/logo.png" alt="">
  </el-col>
  <!-- 中间导航区域 -->
  <el-col :span="16">
   <el-menu
    :default-active="$route.path" 
    class="menu"
    router
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <!-- 循环写的路由,其中路由中有 hidden:true 的就不加入循环 -->
    <template 
     v-for="route in $router.options.routes" 
     v-if="!route.hidden">

     <!-- 循环没有children的路由 -->
     <el-menu-item
      v-if="!route.hasChild" 
      :key="route.path" 
      :index="route.path" >
      {{ route.name }}
     </el-menu-item>

     <!-- 循环有children的路由 -->
     <el-submenu v-else :index="route.path">
      <template slot="title">{{ route.name }}</template>
      <el-menu-item 
       v-for="child in route.children" 
       :index="child.path"
       :key="child.path">
       {{ child.name }}
      </el-menu-item>
     </el-submenu>

    </template>
   </el-menu>
  </el-col>
  <!-- 右边用户信息以及登陆注册 -->
  <el-button-group>
   <el-button type="danger" size="small" round >login</el-button>
   <el-button type="success" size="small" round >regin</el-button>
  </el-button-group>
  
 </el-row>
</template>
<script>
export default {
 // ...
 methods: {
  handleSelect () {
   console.log('菜单选择之后的回调操作')
  }
 }
}
</script>
<style scoped>

</style>

这样在浏览器中的效果

vue 挂载路由到头部导航的方法

vue 挂载路由到头部导航的方法

vue 挂载路由到头部导航的方法

这样点击导航菜单之后的跳转就完全正常了,这样写的好处就是很灵活,如果要加icon图标的话,也可以直接在router/index.js里面的配置路由部分加个字段class:classname,然后在循环的时候输出就可以了。当然这里一般是不把首页这个导航菜单显示出来的,我们可以直接在路由配置中加个hidden:true 就实现了

就像这样

vue 挂载路由到头部导航的方法

vue 挂载路由到头部导航的方法

效果

vue 挂载路由到头部导航的方法

只需要简单的修改就可以完成了

这样在导航上挂路由就完成了,接下来写写样式,完善一下功能header.vue就差不多完成了

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

Javascript 相关文章推荐
用jQuery扩展自写的 UI导航
Jan 13 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
jquery 插件学习(六)
Aug 06 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
详解Vuex管理登录状态
Nov 13 #Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 #Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 #Javascript
js设置随机切换背景图片的简单实例
Nov 12 #Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 #Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 #Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 #Javascript
You might like
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
js实现延迟加载的几种方法详解
2019/01/19 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
python封装对象实现时间效果
2020/04/23 Python
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
Python中获取对象信息的方法
2015/04/27 Python
一份python入门应该看的学习资料
2018/04/11 Python
Django中使用Celery的方法示例
2018/11/29 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
Python爬取梨视频的示例
2021/01/29 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
阿德的梦教学反思
2014/02/06 职场文书
一名老师的自我评价
2014/02/07 职场文书
大学专科自荐信
2014/06/17 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript