在之前Element组件搭建的基础上添加抽屉组件添加用户
App.vue部分：
* { margin: 0; padding: 0; }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,
name: 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: '/',
name: 'login',
component: () => import('../views/LoginView.vue')
},
{
path: '/index',
name: 'index',
/* 一进入index页面就默认进入二级路由users页面 */
redirect: '/index/users',
component: () => import('../views/IndexView.vue'),
children: [{
path: "users",
name: "users",
component: () => import("@/views/UsersView.vue"),
meta:{
title:"用户管理",
subTitle:"用户列表"
},
}]
},
]
const router = new VueRouter({
routes
})
export default router
LoginView.vue登录页：
.myform{ width:600px; margin:50px auto; }用户UsersView.vue：
components创建AddUsers.vue:
.add-users { padding: 20px; }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')
