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 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 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短域名转换为实际域名函数
2011/01/17 PHP
url decode problem 解决方法
2011/12/26 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
php socket通信简单实现
2016/11/18 PHP
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
小程序实现日历左右滑动效果
2019/10/21 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Anaconda入门使用总结
2018/04/05 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
外贸实习生自荐信范文
2013/11/24 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
奔腾年代观后感
2015/06/09 职场文书
秋季运动会加油词
2015/07/18 职场文书
GO中sync包自由控制并发示例详解
2022/08/05 Golang