关注微信公众号:新手程序员教程,领取vue2和vue3的全套笔记!!!!
(1)路由的注册
[1]router/index.js
// (1)导入模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store/index'
// (5)导入需要路由切换转的组件
import Login from '@/views/back/login/Login'
import Register from '@/views/back/login/Register'
import Vue404 from '@/views/back/Vue404'
import Person from '@/views/back/person/Person'
// (2)调用Vue.use( )函数,把VueRouter安装为Vue的插件
Vue.use(VueRouter)
// (3)创建路由的实例对象
const routes = [// 在routes 数组中,声明路由的匹配规则
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '/404', component: Vue404 }
]
const router = new VueRouter({ // 创建路由的实例对象
routes
})
// 提供一个重置路由的方法:由vueX中store文件加下的index.js调用
export const resetRouter = () => {
router.matcher = new VueRouter({
routes
})
}
// 注意:刷新页面会导致页面路由的重置
export const setRoutes = () => {
const storeMenus = localStorage.getItem('menus')
if (storeMenus) {
// 获取当前的路由对象名称数组
const currentRouterNames = router.getRoutes().map(v => v.name)
if (!currentRouterNames.includes('Manage')) {
// 拼装动态路由
const manageRoute = {
path: '/manage',
name: 'Manage',
component: () => import('@/views/back/Manage.vue'),
redirect: '/manage/home',
children: [
{ path: 'person', component: Person, name: '个人介绍' }
]
}
const menus = JSON.parse(storeMenus)
// console.log(storeMenus)
menus.forEach(item => {
if (item.path) { // 当且仅当path不为空的时候才去设置路由
const itemMenu = { path: item.path.replace('/', ''), name: item.name, component: () => import('@/views/' + item.pagePath + '.vue') }
manageRoute.children.push(itemMenu)
} else if (item.children.length) {
item.children.forEach(item => {
if (item.path) {
const itemMenu = { path: item.path.replace('/', ''), name: item.name, component: () => import('@/views/' + item.pagePath + '.vue') }
manageRoute.children.push(itemMenu)
}
})
}// else
})
// 动态添加到现在的路由对象中去
router.addRoute(manageRoute)
}
}// if
}
// 重置路由
setRoutes()
// 路由守卫
router.beforeEach((to, from, next) => {
next() // 放行路由
})
// (4)向外共享路由的实例对象
export default router
[2]vueX
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import router, { resetRouter } from '@/router'
Vue.use(Vuex)
const index = new Vuex.Store({
mutations: {
logout () {
// 清空缓存
localStorage.removeItem('user')
localStorage.removeItem('menus')
router.push('/login')
// 重置路由
// eslint-disable-next-line no-undef
resetRouter()
}
}
})
export default index
[3]vue的views下的组件视图
Login.vue
methods: {
login () {
this.$refs.userForm.validate((valid) => {
if (valid) { // 表单校验合法
this.request.post('/back/user/login', this.user).then(res => {
if (res.data.status === this.config.success) {
localStorage.setItem('user', JSON.stringify(res.data.data)) // 存储用户信息到浏览器
localStorage.setItem('menus', JSON.stringify(res.data.data.menuList))
// 设置路由来自router
setRoutes()
this.$message.success(res.data.msg)
this.$router.replace('/manage/home')
} else {
this.$message.error(res.data.msg)
}
})
} else {
return false
}
})
}
(2)vue组件的动态渲染(利用for循环)
[1]在components/Aside.vue
<div v-for="item in menus" :key="item.id">
<div v-if="item.path">
<el-menu-item :index="'/manage'+item.path">
<template slot="title">
<i :class="item.icon"></i>
<span slot="title">{{item.name}}</span>
</template>
</el-menu-item>
</div>
<div v-else-if="item.children">
<el-submenu :index="''+item.id">
<template slot="title">
<i :class="item.idon"></i>
<span slot="title">{{item.name}}</span>
</template>
<div v-for="son in item.children" :key="son.id">
<el-menu-item :index="'/manage'+son.path" v-if="item.id==son.pid">
<i :class="son.icon"></i>
<span slot="title">{{son.name}}</span>
</el-menu-item>
</div>
</el-submenu>
</div>
</div>
[2]后端传到前端的数据结构为: