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 相关文章推荐
基于jquery的3d效果实现代码
Mar 23 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
jquery ui对话框实例代码
May 10 Javascript
jquery 定位input元素的几种方法小结
Jul 28 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 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脚本数据库功能详解(上)
2006/10/09 PHP
php 全文搜索和替换的实现代码
2008/07/29 PHP
php 空格,换行,跳格使用说明
2009/12/18 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
php生成图片验证码的方法
2016/04/15 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
python实现进程间通信简单实例
2014/07/23 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
基于python图像处理API的使用示例
2020/04/03 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
HTML5引入的新数组TypedArray介绍
2012/12/24 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
求职信内容考虑哪几点
2013/10/05 职场文书
团日活动策划书
2014/02/01 职场文书
毕业生求职信范文
2014/06/29 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL