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 相关文章推荐
菜单效果
Oct 14 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
js窗口震动小程序分享
Nov 28 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 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
PHP获取网卡地址的代码
2008/04/09 PHP
php实现网站插件机制的方法
2009/11/10 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
python 重定向获取真实url的方法
2018/05/11 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
十佳家长事迹材料
2014/08/26 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
房产电话营销开场白
2015/05/29 职场文书
毕业酒会致辞
2015/07/29 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
python基础之停用词过滤详解
2021/04/21 Python
Python上下文管理器Content Manager
2021/06/26 Python