ElementUI导航菜单通过路由实现页面跳转

1.index.vue

<template>

  <div>

    <el-container>

      <!-- 左边导航栏 -->

      <el-aside width="250px">

        <div class="main">

          <aside class="aside">

            <!--导航菜单-->

            <el-menu

              default-active="1-3"

              background-color="#545c64"

              text-color="#fff"

              active-text-color="#0096FF"

              class="el-menu-vertical-demo"

              router

            >//必要

              <!-- @open="handleopen"

              @close="handleclose"

              @select="handleselect" -->

              <el-menu-item index="/pc_home" class="logo">

                <!-- <span slot="title" class="title"></span> -->

                <i class="el-icon-eleme"></i>管理系统logo

              </el-menu-item>     

                //路由路径        

              <el-menu-item index="/menuOne">

                <i class="el-icon-edit-outline"></i>

                <span slot="title">菜单一</span>

              </el-menu-item>

              <el-menu-item index="/business">

                <i class="el-icon-s-custom"></i>

                <span slot="title">菜单二</span>

              </el-menu-item>

              <el-menu-item index="/order">

                <i class="el-icon-s-order"></i>

                <span slot="title">菜单三</span>

              </el-menu-item>

              <el-menu-item index="/water">

                <i class="el-icon-pie-chart"></i>

                <span slot="title">菜单四</span>

              </el-menu-item>

              <el-menu-item index="/journalism">

                <i class="el-icon-chat-dot-square"></i>

                <span slot="title">菜单五</span>

              </el-menu-item>

              <el-submenu index="/install">

                <template slot="title">

                  <i class="el-icon-setting"></i>

                  <span slot="title">菜单六</span>

                </template>

                <el-menu-item index="/install/system">菜单六一</el-menu-item>

              </el-submenu>

            </el-menu>

          </aside>

        </div>

      </el-aside>

      <el-container>

            <el-dropdown trigger="hover">

              <span class="el-dropdown-link userinfo-inner">

                <el-avatar

                  src="url"

                ></el-avatar>//头像

                <div class="name">adim</div>

              </span>

              <el-dropdown-menu slot="dropdown">

                <el-dropdown-item>消息</el-dropdown-item>

                <el-dropdown-item>设置</el-dropdown-item>

                <el-dropdown-item divided @click.native="logout"

                  >退出登录</el-dropdown-item

                >

              </el-dropdown-menu>

            </el-dropdown>

          </div>

        </el-header>

        <el-main>

          <!-- 主体内容 -->

          <router-view></router-view>

        </el-main>

      </el-container>

    </el-container>

  </div>

</template>

<script>

export default {

  data() {

    return {

      title: "首页",

    };

  },

  onload() {

    console.log(document.documentElement.clientHeight);

  },

  watch: {

    $route() {

    },

  },

  mounted() {},

  methods: {

    },

  },

};

</script>

<style lang="less" scoped>

.el-header {

  background-color: #fff;

  color: #333;

  text-align: center;

  line-height: 60px;

  // 头部导航栏

  .hearNavBar {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    .title {

      font-family: Roboto;

      font-style: normal;

      font-weight: 500;

      font-size: 14px;

      text-align: center;

      color: #657180;

    }

    .userinfo-inner {

      display: flex;

      flex-direction: row;

      align-items: center;

      padding-left: 50px;

      background: #fafbfc;

      border-left: 1px solid #f6f7f8;

      border-right: 1px solid #f6f7f8;

      .name {

        margin-left: 14px;

        margin-right: 78px;

        font-family: Roboto;

        font-style: normal;

        font-weight: 500;

        font-size: 14px;

        text-align: center;

        color: #000000;

      }

    }

  }

}

.el-footer {

  background-color: #545c64;

  color: #333;

  text-align: center;

  line-height: 60px;

}

.el-aside {

  background-color: #545c64;

  color: #333;

  line-height: 200px;

}

.el-menu {

  border-right-width: 0;

}

.el-main {

  background-color: #f2f7ff;

  height: 875px;

  //这个地方的样式会影响所有链接的页面

}

body > .el-container {

  margin-bottom: 40px;

}

.el-container:nth-child(5) .el-aside,

.el-container:nth-child(6) .el-aside {

  line-height: 260px;

}

.el-container:nth-child(7) .el-aside {

  line-height: 320px;

}

</style>

2.router/index.js

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

const pcList = [{

    path: `/index`,//布局页

    name: `index`, 

    components: {

      default: () => import('@/views/index/index.vue'),

    },

    children:[

      {

        path: `/home`,//菜单

        name: `home`,     

        components: {

          default: () => import('@/views/home.vue'),

        }

      },

      {

        path: `/menuOne`,//菜单一

        name: `menuOne`,     

        components: {

          default: () => import('@/views/menuOne/menuOne.vue'),

        }

      },

      {

        path: `/business`,//菜单二

        name: `business`,       

        components: {

          default: () => import('@/views/business/business.vue'),

        }

      },

      {

        path: `/order`,//菜单三

        name: `order`,       

        components: {

          default: () => import('@/views/order/order.vue'),

        }

      },

      {

        path: `/water`,//菜单四

        name: `water`,       

        components: {

          default: () => import('@/views/water/water.vue'),

        }

      },

      {

        path: `/journalism`,//菜单五

        name: `journalism`,     

        components: {

          default: () => import('@/views/journalism/journalism.vue'),

        }

      },

      {

        path: `/install`,//菜单六

        name: `install`,       

        components: {

          default: () => import('@/views/install/install.vue'),

        },

        children:[

          {

            path: `/install/system`,//菜单六一

            name: `/install/system`,         

            components: {

              default: () => import('@/views/install/system.vue'),

            }

          },     

            ],

          }, 

        ],

      },

    ],

  },

  {

    path: `/login`,//登录页

    name: `login`,

    components: {

      default: () => import('@/views/login/index.vue'),

    }

  }

]

const router = new Router({

  routes: [{

      path: '/',

      redirect: `/login`

    },

    {

      path: `/404`,

      name: '404',

      components: {

        default: () => import('@/components/404/index.vue'),

      }

    }

  ]

})

const originalPush = Router.prototype.push

Router.prototype.push = function push(location) {

  return originalPush.call(this, location).catch(err => err)

}

router.beforeEach((to, from, next) => {

  let path =  `/login` 

  let token = user.state.token//token

  console.log(token);

  console.log(!token && to.path !== path);

  if (!token && to.path !== path) { // 如果是登录页面的话，直接next()

    next({

      path:path

    });

  }

  next();

})

export default router