Vue之后台动态生成菜单

1、主要思路：

用Element-UI框架，快速建成网站框架，
（1）开始加载代码：

<template>
    <div>
        <el-container>
              <el-header class="myheader">Header</el-header>
           <el-container>
                 <el-aside width="200px" >
                     <!--在这里开始写菜单-->
                      <el-menu :collapse="isCollapse" @select="handelSelect">
                           <el-submenu v-bond:index="iteam.id" v-for="iteam in menus" v-bind:key="iteam.id">
                                 <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span slot="title">{{iteam.name}}</span>
                                 </template>

                                 <el-menu-item v-bind:index="l.path" v-for="l in iteam.children" v-bind:key="l.id">
                                     {{l.name}}
                                 </el-menu-item>
                                
                           </el-submenu>

                      </el-menu>
                  </el-aside>
              <el-main>
                  {{menus}}
              </el-main>
           </el-container>
       </el-container>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isCollapse:false,
            menus:[]
        }
    },
    //刚进来就要调，所以可以用钩子函数实现
    created(){
        this.init()
    },
    methods:{
        handelSelect:function(index,indexpath){
              alert(index);
        },

        init:function(){
            //初始化菜单
            this.$api. _api_listMenus().then(data=>{
                this.menus=data.data;
            });
        }
    }
}
</script>





<style scoped>
   .myheader{
       background-color:blue;
   }
</style>

（2）调用api里面的方法：

import axios from '../util/axios.js'
export default{

    /**
     * 登录方法
     * @param {*} params 
     */
     _api_login:function(params){
        return  axios({
             url:"/login",
             method:'post',
             data:params
         });
     },

     _api_register:function(){
          return axios({
              url:"/users",
              method:'POST',
              data:params
          });
     },

     _api_listUers:function(){
         return axios({

         });
     },
/**
 * 动态获取树形菜单
 * @param {*} params 
 */
     _api_listMenus:function(params){
         return axios({
             url:"/menus",
             method:'get'
         });
     }
}

（3）再调用axios里面的方法：

import axios from 'axios'
import {Message} from 'element-ui'
// 创建实例时设置配置的默认值
var instance = axios.create({
    baseURL: 'http://123.57.7.108:1024/emall',
    timeout:'3000'
  });
//定义拦截器
    
//给创建的实例添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    var token=window.localStorage.getItem("token");
    if(token){
      config.headers['Authorization']="Bearer "+token;
    }
    //例子
    if(config.methods=='post'){
       config.headers[' contentType']='application/json;charset=utf-8'
    }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 给创建的实例添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    const data=response.data;//从数据接口中返回的json对象 
    switch(data.code){
          case 200:
          case 201:
          case 204:
            //收到以上端口号信息进入.then
            return data;//返回的是data,而不是respons

            default:
              //其它情况，弹框就可以了,进入.catch
              Message({
                message: data.message,
                type: 'warning'
                  });
              return Promise.reject(data.message);
    }
    return response;
  }, function (error) {       
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  //导出实例，供其他模块导入使用
  export default instance;

若是获得正确的端口号即成功就返回data,并执行.then,否则执行.catch.

2、要生动态切换页面，要在指定页面进行路由切换即可，见下篇。