在之前Element组件搭建的基础上添加抽屉组件添加用户

App.vue部分：

public下创建minixs文件创建createRoute.js:

export default {

methods: {

createRouteFn: function () {

let arrRoute = JSON.parse(localStorage.arrRoute);

/* 循环路由数组动态添加路由 */

arrRoute.forEach((v) => {

/* 我们尽量使用v.children[0].path 原因是我们的路径名用的是子路由的 */

/* 如果我们直接写死v.children[0].path 会导致只有一个子路由路径被动态添加了

如果有多个，就无法生效了，所以我们要二次循环v.children,从而实现多个二级子路由

能够被动态的添加 */

v.children.forEach((r) => {

this.$router.addRoute("index", {

path: r.path,

meta: {

title: v.authName,

subTitle: r.authName,

/* 把名字改成我们页面的名称例如CategoriesView.vue */

component: () =>

import(

`@/views/${r.path.substring(0, 1).toUpperCase() + r.path.substring(1)

}View.vue`

});

}

路由router下index.js:

import Vue from 'vue'

import VueRouter from 'vue-router'

/* 点击相同的路由出现报错，使用下面的代码抛出异常 */

const originalPush = VueRouter.prototype.push

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

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

}

Vue.use(VueRouter)

const routes = [

{

path: '/',

component: () => import('../views/LoginView.vue')

{

path: '/index',

/* 一进入index页面就默认进入二级路由users页面 */

redirect: '/index/users',

component: () => import('../views/IndexView.vue'),

children: [{

path: "users",

component: () => import("@/views/UsersView.vue"),

meta:{

title:"用户管理",

subTitle:"用户列表"

}]

]

const router = new VueRouter({

routes

})

export default router

LoginView.vue登录页：

用户UsersView.vue：

components创建AddUsers.vue:

main.js部分：

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Vue.config.productionTip = false

/* 全局的日期过滤器 */

function bu(v) {

return v < 10 ? '0' + v : v

}

Vue.filter('getDate',(v)=>{

/* 生成当前时间戳的日期对象 */

let oDate = new Date(v);

return bu(oDate.getFullYear())+'-'+bu(oDate.getMonth()+1)+'-'+bu(oDate.getDate());

})

new Vue({

router,

store,

render: h => h(App)

}).$mount('#app')

VUE添加抽屉组件添加用户功能