vue基于element路由侧边栏名字跳转

安装路由

在终端用下面语句安装vue的路由，@后面的4是版本号，下载时可自定义版本。

npm install vue-router@4

在main.js中配置路由

import Vue from 'vue'
import App from './App.vue'
//全局引入（在实际项目都是做的按需引入，我这里偷懒就没做了）
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//引入路由
import router from '../router'

Vue.config.productionTip = false
Vue.use(ElementUI)


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

#新建一个router文件夹管理路由
有些可能在src文件夹下自带router文件夹，在下面新建index.js管理路由。下面是一个简单例子

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

export default new VueRouter({
    routes: [
      {
        path:'/',
        name:'Main',
        component: ()=>import('../views/Main.vue'),
        children:[
          {
            path:'home',
            name:'Home',
            component:()=>import('../views/Home')
          }, 
          
          {
            path:'user',
            name:'User',
            component:()=>import('../views/User')
          }
        ]
      } 
    ]
  });

对App.vue做修改

<template>
  <div id="app">
      <router-view></router-view> 
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>
html,body{
  margin: 0;
  padding: 0;
}
#app {
  height: 100vh;
}
</style>

对公共侧边栏CommandAside.vue做路由配置。

引入element侧边栏等

一定不要忘记在加router！！！

将点击跳转写在el-menu-item中：@click=“clickMenu(item)”

<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo"  router active-text-color="#409EFF" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <h3>火车站管理系统</h3>
    <el-menu-item  v-for="item in noChildren" :index="item.path" :key="item.path" @click="clickMenu(item)">
    <i :class="'el-icon-'+item.icon"></i>
    <span slot="title">{{item.label}}</span>
</el-menu-item>
</el-menu>
</template>

在下面的method中实现编程式跳转

clickMenu(item){
      this.$router.push(//页面跳转
        {
          name:item.name
        }
      )   
    }

注意用name跳转的原因是我定义了name的属性。但是在整个编程过程中你会发现，定义了很多name。经过我自己的测试，我发现不同.vue文件下name名不相同不影响它的跳转。只要保证它们对于的path是一样的就行。（可能name的作用就是方便函数编程吧）

下面是完整代码。
我只对首页和用户管理也做了路由。其他还没来得及写。

<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo"  router active-text-color="#409EFF" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <h3>火车站管理系统</h3>
    <el-menu-item  v-for="item in noChildren" :index="item.path" :key="item.path" @click="clickMenu(item)">
    <i :class="'el-icon-'+item.icon"></i>
    <span slot="title">{{item.label}}</span>
</el-menu-item>
</el-menu>
</template>

<style lang="less" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu{
    height: 100%;
    border: none;
    h3{
      color: #409EFF;
      text-align:center;
      line-height: 48px
    }
  }
  
</style>

<script>
  export default {
    data() {
      return {
        isCollapse: false,
        menu:[
          {
            path:'/home',
            name:'home',
            label:'系统首页',
            icon:'s-home',
            url:'Home/Home'
          },
          {
            path:'/euser',
            name:'euser',
            label:'系统用户管理',
            icon:'user'
          },
          {
            path:'/pot',
            name:'pot',
            label:'火车站点管理',
            icon:'s-claim'
          },
          {
            path:'/times',
            name:'times',
            label:'火车车次管理',
            icon:'s-shop'
          },
          {
            path:'/journey',
            name:'journey',
            label:'列车行程安排',
            icon:'date'
          },
          {
            path:'/user',
            name:'user',
            label:'乘客信息管理',
            icon:'postcard'
          },
          {
            path:'/timescheck',
            name:'timeschick',
            label:'火车车次查询',
            icon:'set-up'
          },
          {
            path:'/tickercheck',
            name:'tickercheck',
            label:'售票记录查询',
            icon:'tickets',
          },
          {
            path:'/tickerdelete',
            name:'tickerdelete',
            label:'退票查询',
            icon:'refresh-left'
          }  
        ]
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    clickMenu(item){
      this.$router.push(//页面跳转
        {
          name:item.name
        }
      )   
    },
    computed:{
      noChildren(){
       return this.menu.filter(item =>!item.Children)//过滤元组
      }
    }
  }
</script>

结果展示

点击系统首页,最上面的路径可以看出以及进入\home，我在这个界面就写了“主页面”三个字做测试,测试成功。

最后一定要把router写在el-menu里面！！！！这个是element组件，一定要做路由才行。