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 相关文章推荐
js查找父节点的简单方法
Jun 28 Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
JSON语法五大要素图文介绍
Dec 04 Javascript
解析window.open的使用方法总结
Jun 19 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
javascript数组去重小结
2016/03/07 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
Django的分页器实例(paginator)
2017/12/01 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
python实现扫雷小游戏
2020/04/24 Python
一套中级Java程序员笔试题
2015/01/14 面试题
在职研究生自我鉴定
2013/10/16 职场文书
新闻专业应届生求职信
2013/10/31 职场文书
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
公司聘任书模板
2014/03/29 职场文书
校长寄语大全
2014/04/09 职场文书
委托书怎么写
2014/07/31 职场文书
2014年党建工作总结
2014/11/11 职场文书
党小组意见范文
2015/06/08 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书