使用el-menu和vue-router实现页面切换_weixin_33768481的博客-程序员宅基地

技术标签: ViewUI  javascript  

看一下文件目录结构

 

Home.vue、Rank.vue、Usercenter.vue是3个要跳转的页面,这里只是简单的表示一下,所以这三个文件里没有写太多东西,给大家看一个,其他两个是差不多的

Home.vue:

<template>
  <div>
    首页
  </div>
</template>
<script>
export default {
  name: 'Home'
}
</script>

<style lang="less" scoped>
</style>

这3个页面写好了就定义路由文件,引入各个页面,设置跳转路径:

router.js:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue' // 首页
import Rank from './views/Rank' // 排行榜
import UserCenter from './views/UserCenter' // 个人中心

Vue.use(Router)

export default new Router({
  mode: 'history', // 去掉url中的#
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/rank',
      name: 'rank',
      component: Rank
    },
    {
      path: '/userCenter',
      name: 'userCenter',
      component: UserCenter
    }
  ]
})

然后写跳转按钮的界面Tab.vue,使用ElementUI的el-menu,这里要注意的是,要在el-menu里加上router属性,然后el-menu-item的index属性对应的是跳转路径

Tab.vue的内容如下:

<template>
  <div>
    <el-menu :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      router
      @select="handleSelect">
      <el-menu-item index="/home">
        首页
      </el-menu-item>
      <el-menu-item index="/rank">
        排行榜
      </el-menu-item>
      <el-menu-item index="/userCenter">
        个人中心
      </el-menu-item>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: 'Tab',
  data() {
    return {
      activeIndex: '/home'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="less" scoped>
.logo {
     
  height: 56px;
}
a {
     
  text-decoration: none;
}
.router-link-active {
     
  text-decoration: none;
}
</style>

然后在App.vue中把Tab.vue组件加进来:

<template>
  <div id="app">
    <tab></tab>
    <!-- 存放跳转后的页面 -->
    <router-view></router-view> 
  </div>
</template>
<script>
import Tab from './views/Tab' // 引入tab组件
export default {
  components: {
    Tab
  }
}
</script>

<style lang="less">
* {
     
  margin: 0;
  padding: 0;
}
#app {
     
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

 

 这样就大功告成了。

看下效果:

 

转载于:https://www.cnblogs.com/shmily1213/p/10885322.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_33768481/article/details/94210711

智能推荐

【秋招】秋招最全指南,如何准备,如何投递,以及面试攻略大全分享!_程序员入门进阶的博客-程序员宅基地

【秋招】秋招最全指南,如何准备,如何投递,以及面试攻略大全分享! 大家好,首先想麻烦大家能够一键三连,你们的支持是我做视频的最大动力。今天继续给大家分享秋招攻略。今年的秋招形势比较严峻,而大家也对怎么拿到心仪的offer,心里没底,于是这一节来说说这块。这一节主要分为七点:1 秋招为什么重要?2 应该去哪里找信息?3 投递方式?4 该做那些准备?5 面试技巧?6 资料大全?...

搭建redis完成后项目无法连接[nested exception is io.lettuce.core.RedisConnectionException: Unable to connect ]_wangmj518的博客-程序员宅基地

1 搭建redis并启动成功后&amp;#xff0c;项目连接失败 -1 项目配置&amp;#xff1a; -1.1 如果在搭建redis时&amp;#xff0c;没有设置redis密码&amp;#xff0c;那么在项目中配置文件&amp;#xff08;application.properties/application.yml&amp;#xff09;配置文件中不需要配置password -1.2 spr…1 搭建redis并启动成功后,项目连接失败-1 项目配置:-1.1 如果在搭建redis

ProgressBar(进度条)_秋风十里的博客-程序员宅基地_progressbar1

ProgressBar四个重要属性: 1. Value 当前进度条加载 该属性含义为:设置进度条的进度值 有两张方式进行设置: 一、progressBar.Value = 1000; 二、progressBar.increment(1000);2. Step 进度条递增 该属性含义为:控制增长的幅度。 引用Step属性的一个

访问控制列表ALC_森森的森森的博客-程序员宅基地

ALCALC的基本原理ALC的种类和配置ALC的基本应用ALC的基本原理ACL使用包过滤技术,在路由器上读取OSI七层模型的第3层和第4层包头中的信息。如源地址,目标地址,源端口,目标端口等,根据预先定义好的规则,对包进行过滤,从而达到访问控制的目的。ACl是一组规则的集合,它应用在路由器的某个接口上。对路由器接口而言,访问控制列表有两个方向。出:已经过路由器的处理,正离开路由器的数据包。入:已到达路由器接口的数据包。将被路由器处理。如果对路由器的某接口应用了ACL,那么路由器对数据包应用该组规

写给准备参加秋招的学弟学妹们~一定要来看哦~_671coder的博客-程序员宅基地

校招必看————劲爆人气博客~~~~~july大牛也在微博做了转载~~~~~so~~~~~一定要看哦~~~~~!!!

随便推点

Struts简介_chengqiuming的博客-程序员宅基地_struts

一 Struts英文单词意思支柱、支架,来源于建筑和旧式飞机使用的金属支架。二 定义Struts是流行和成熟的基于MVC设计模式的Web应用程序框架。Struts在软件开发中,是一个非常优秀的框架。它先是Jakarta项目的一个子项目,后来转为Apache软件基金会的一个子项目。Struts2是Struts的下一代产品,它以WebWork为核心,采用拦截器的机制处理用户的请求,...

iOS文件操作基础_Morris_的博客-程序员宅基地

读取文件//读取对应路径下的文件大小+ (unsigned long long)getSizeWithFilePath:(nonnull NSString *)filePath error:(NSError **)error{ NSFileManager *fm = [NSFileManager defaultManager]; NSDictionary *attribute...

java基础学习——循环结构(while,do-while,for)笔试题_未央Pro的博客-程序员宅基地

本文根据训话初学者学习用来练习一些经常出错误的地方,希望大家多多补充。

exports defalut 和 export_pspxuan的博客-程序员宅基地

ES6 导出导入导入: import 模块名 from '模块标识符' 和 import '路径'导出: export defalut 和 export 向外暴露成员NODE 导出导入导入: var 名称 = require(‘模块标识符’)导出: module.exports 和 exports注意:语法要成套使用,不要导出用 node ,导入用 ES6 语法...

SQLSERVER 2012之AlwaysOn -- 同步模式下的网卡性能优化_weixin_33997389的博客-程序员宅基地

原文:SQLSERVER 2012之AlwaysOn -- 同步模式下的网卡性能优化 本文是基于上一篇《SQLServer 2012之AlwaysOn —— 指定数据同步链路,消除网络抖动导致的提交延迟问题》的问题继续进行优化;具体背景请参照上文; 前后折腾了一个多月,最近终于把这块难啃的骨头搞定了。问题只是出在网卡的高级功能上; ...

Windows 怎么样设置nginx开机自启动(亲测有效)_冷色调的夏天的博客-程序员宅基地

Windows 怎么样设置nginx开机自启动(亲测有效)nginx是一款功能强大比apache还要火热的web服务软件一般在Linux里面设置nginx自启动很容易chkconfig nginx on 或者systemcel enable nginx.service便可但是今天在公司的一台Windows服务器上需要安装个nginx,但是重启后发现服务就自动关闭了,便在服务中去找有关n...

推荐文章

热门文章

相关标签