Vue之二级路由配置和用户查询功能

1、思路：

在一级路由api配置中，增加子路由api配置数组，进行配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import Main from '../views/Main.vue'
Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Login_',
    component: Login
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path:'/login',
    name:'Login',
    component:Login
  },
  {
    path:'/home',
    name:'Home',
    component: Home
  },
  {
    path:'/main',
    name:'Main',
    component:Main,
    children:[
      {
        path:'/users/management',
        name:'Users',
        component: () => 
               import(/* webpackChunkName: "about" */ '../views/system/Users.vue')  

      },
      {
        path:'/roles/management',
        name:'Roles',
        component:()=>
               import('../views/system/Roles.vue')
      },
      {
        path:'/privileges/management',
        name:'Privileges',
        component:()=>
               import('../views/system/Privileges.vue')
      },
      {
        path:'/product/management',
        name:'Product',
        component:()=>
               import('../views/ware/Product.vue')
      },
      {
        path:'/product/category',
        name:'Category',
        component:()=>
               import('../views/ware/Category.vue')
      },
      {
        path:'/brands/management',
        name:'Brands',
        component:()=>
               import('../views/ware/Brands.vue')
      },
      {
        path:'/orders/list',
        name:'List',
        component:()=>
               import('../views/order/List.vue')
      },
      {
        path:'/orders/set',
        name:'Set',
        component:()=>
               import('../views/order/Set.vue')
      },
      {
        path:'/rejected/process',
        name:'Process',
        component:()=>
               import('../views/order/Process.vue')
      },
      {
                path:'/seckill',
                name:'Seckill',
                component:()=>
                       import('../views/matketing/Seckill.vue')
              },
             
        
         {
                path:'/coupon',
                name:'Coupon',
                component:()=>
                       import('../views/matketing/Coupon.vue')
              },
              {
                path:'/brand/recommend',
                name:'BrandReco',
                component:()=>
                       import('../views/matketing/BrandReco.vue')
              },
              {
                path:'/newgoods/recommend',
                name:'Newgoods',
                component:()=>
                       import('../views/matketing/Newgoods.vue')
              },
    
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

然后在主页面中绑定数据，进行二级路由切换：

<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>
                     <!--二级路由窗口-->
                    <router-view/>
                  
              </el-main>
           </el-container>
       </el-container>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isCollapse:false,
            menus:[]
        }
    },
    //刚进来就要调，所以可以用钩子函数实现
    created(){
        this.init()
    },
    methods:{
        handelSelect:function(index,indexpath){
             //切换路由  push(望history栈推入一个路径)  和replace(替换)
             this.$router.replace({
                 path:index
             })
             //alert(index);
            
        },

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





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

注意切换路由时两种操作的方法：

//切换路由 push(往history栈推入一个路径) 和replace(替换)

用户查询功能

<template>
    <div>
        <el-table
    :data="users"
    border
    style="width: 100%">
    
    <el-table-column
      prop="id"
      label="编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="realname"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="idNumber"
      label="身份证号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="300">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="电话"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>
</template>
<script>
export default {
    data(){
        return{
           users:[],
           params:{
               pageNum:1,
               pageSize:10,
               query:''
           }
        }
    },
    created(){
        this.init()
    },
    methods:{
        init:function(){
           this.$_api_listUers(this.params).then(data=>{
                //data.data.list,这就返回的数组
                this.users=data.data.list;
           });
        },
        handleClick:function(){
            alert(row.id);
        }
    }
}
</script>