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 相关文章推荐
innerText 使用示例
Jan 23 Javascript
在Mac OS下使用Node.js的简单教程
Jun 24 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
详解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
我的论坛源代码(三)
2006/10/09 PHP
dedecms中常见问题修改方法总结
2007/03/21 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
php获取微信openid方法总结
2019/10/10 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
浅谈javascript中关于日期和时间的基础知识
2016/07/13 Javascript
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
浅析Angular19 自定义表单控件
2018/01/31 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
node中的session的具体使用
2018/09/14 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python  连接字符串(join %)
2008/09/06 Python
9种python web 程序的部署方式小结
2014/06/30 Python
Python实现list反转实例汇总
2014/11/11 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
python 获取图片分辨率的方法
2019/01/08 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
使用python绘制二维图形示例
2019/11/22 Python
python super用法及原理详解
2020/01/20 Python
python实现五子棋程序
2020/04/24 Python
Pandas的Apply函数具体使用
2020/07/21 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
升学宴主持词
2014/04/02 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python