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技术栈中的四种依赖注入详解
Feb 23 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
新手简单了解vue
May 29 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 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中的常用魔术方法总结
2013/08/02 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
PHP如何使用cURL实现Get和Post请求
2020/07/11 PHP
基于jquery的动态创建表格的插件
2011/04/05 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
layui分页效果实现代码
2017/05/19 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
JS三级联动代码格式实例详解
2019/12/30 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
新学期校长寄语
2014/01/18 职场文书
感恩寄语大全
2014/04/11 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
Go中的条件语句Switch示例详解
2021/08/23 Golang
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB