使用el-menu和vue-router实现页面切换

最新推荐文章于 2024-07-23 09:16:46 发布

weixin_33768481

最新推荐文章于 2024-07-23 09:16:46 发布

阅读量8.9k

点赞数 3

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shmily1213/p/10885322.html

版权

本文介绍了如何结合Vue.js和ElementUI的el-menu组件来实现页面间的路由切换。通过创建Home.vue、Rank.vue、Usercenter.vue三个页面，并在router.js中定义路由，设置跳转路径。Tab.vue组件利用el-menu和router属性实现菜单项的点击跳转，最终在App.vue中引入Tab.vue完成布局。

摘要由CSDN通过智能技术生成

看一下文件目录结构

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' //