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

看一下文件目录结构

 

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