Vue学习

Vue动态路由加载

代码语言：javascript复制

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login'
import index from '../views/Index.vue'
import userShow from '../views/user/show.vue'
import userBack from '../views/user/back.vue'
import userShowBackBook from '../views/user/ShowBackBook'
import userShowReserveBook from '../views/user/ShowReserveBook'
import adminShow from '../views/admin/Show'
import adminBackBooks from '../views/admin/BackBooks'
import adminShowREserveBook from '../views/admin/ShowReserveBook'
import sysadminShowUser from '../views/sysadmin/ShowUser'
import sysadminShow from '../views/sysadmin/Show'
import sortFindAll from '../views/sysadmin/sortFindAll'
import Book from '../views/user/book'
import addUser from '../views/sysadmin/addUser'
import sysAdminBook from '../views/sysadmin/add'
import addSort from '../views/sysadmin/addSort'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    hidden: true,
    component: Login
  }
]
const navUser = {
  path: '/user',
  name: '书籍管理',
  component: index,
  redirect: '',
  children: [
    {
      path: '/userShow',
      name: '书籍查询',
      component: userShow
    },
    {
      path: '/user/back',
      name: '书籍借阅',
      component: userBack
    },
    {
      path: '/user/showBackBook',
      name: '书籍归还',
      component: userShowBackBook
    },
    {
      path: '/user/ShowReserveBook',
      name: '书籍预定',
      component: userShowReserveBook
    },
    {
      path: '/book',
      name: 'book',
      hidden: true,
      component: Book
    }
  ]
}
const navAdmin = {
  path: '/admin',
  name: '书籍处理',
  component: index,
  redirect: '/admin/show',
  children: [
    {
      path: '/admin/show',
      name: '借书处理',
      component: adminShow
    },
    {
      path: '/admin/backBooks',
      name: '归还处理',
      component: adminBackBooks
    },
    {
      path: '/admin/ShowReserveBook',
      name: '预定处理',
      component: adminShowREserveBook
    }
  ]
}
const navSysAdmin = [
  {
    path: '/',
    name: '系统管理',
    component: index,
    redirect: '/index',
    children: [
      {
        path: '/sysadminShowUser',
        name: '用户管理',
        component: sysadminShowUser
      },
      {
        path: '/sysadminShow',
        name: '书籍管理',
        component: sysadminShow
      },
      {
        path: '/sortFindAll',
        name: '类别管理',
        component: sortFindAll
      }
    ]
  },
  {
    path: '/addUser',
    name: '添加用户',
    hidden: true,
    component: addUser
  },
  {
    path: '/sysAdminBook',
    name: '添加用户',
    hidden: true,
    component: sysAdminBook
  },
  {
    path: '/addSort',
    name: '添加分类',
    hidden: true,
    component: addSort
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
var userRole = localStorage.getItem('userRole')
alert(userRole)
if (userRole === 'user') {
  router.addRoutes(navUser)
} else if (userRole === 'admin') {
  router.addRoutes(navAdmin)
} else if (userRole === 'sysAdmin') {
  router.addRoutes(navSysAdmin)
} else {
  console.log('没有用户权限信息')
}
// 登录拦截器
router.beforeEach((to, from, next) => {
  if (to.path !== '/login' && !userRole) {
    next('/login')
  } else {
    next()
  }
})
export default router

代码语言：javascript复制

<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu router>
                    <el-submenu
                        v-bind="item"
                        :key="item"
                        v-for="item in $router.options.routes"
                        :index="item.path"
                    >
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            {{item.name}}
                        </template>
                        <el-menu-item
                            :key="item2"
                            v-for="item2 in item.children"
                            :index="item2.path"
                        >{{item2.name}}</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看</el-dropdown-item>
                            <el-dropdown-item>新增</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>王小虎</span>

                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

@

component el import path 管理

0 人点赞