一、项目启动后,输入localhost:8080直接跳转到404
修改路由
router/index.js
{
path: '/404',
name: '404',
component: () => import('../views/404.vue')
},
// 路由守卫
router.beforeEach((to, from, next) => {
localStorage.setItem("currentPathName", to.name) // 设置当前的路由名称,为了在Header组件中去使用
store.commit("setPath") // 触发store的数据更新
//未找到路由的情况
if (!to.matched.length) {
const storeMenus = localStorage.getItem("menus")
if (storeMenus) {
next("/404")
} else {
//跳回登录页面
next("/login")
}
}
//其他的情况
next()
})
二、个人信息页面404
router/index.js
const manageRoute = {
path: '/',
name: 'Manage',
component: () => import('../views/Manage.vue'),
redirect: "/home",
children: [
{
path: '/person',
name: '个人信息',
component: () => import('../views/Person.vue'),
},
]
}
三、新建页面404
1.新建页面
2.页面添加菜单
3.给管理员分配菜单
3.重新登录
4.点进刚分配的菜单
5.404
router/index.js
//提供一个重置路由的方法
export const resetRouter=()=>{
router.matcher = new VueRouter({
mode:'history',
base:process.env.BASE_URL,
routes
})
}
store/index.js文章来源:https://www.toymoban.com/news/detail-535283.html
logout(){
localStorage.removeItem("user")
localStorage.removeItem("menus")
router.push("/login")
//重置路由
resetRouter()
}
优化创建路由,防止频繁创建文章来源地址https://www.toymoban.com/news/detail-535283.html
//注意刷新页面会导致重置路由
export const setRoutes = () => {
const storeMenus = localStorage.getItem("menus");
if (storeMenus) {
//获取当前的路由对象名称数组
const currentRouteNames = router.getRoutes().map(v => v.name)
if (!currentRouteNames.includes('Manage')) {
//拼装动态路由
const manageRoute = {
path: '/',
name: 'Manage',
component: () => import('../views/Manage.vue'),
redirect: "/home",
children: [
{
path: '/person',
name: '个人信息',
component: () => import('../views/Person.vue'),
},
]
}
const menus = JSON.parse(storeMenus)
menus.forEach(item => {
//当且仅当path不为空的时候才去设置路由
if (item.path) {
let 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) {
let itemMenu = {
path: item.path.replace("/", ""),
name: item.name,
component: () => import('../views/' + item.pagePath + '.vue')
}
manageRoute.children.push(itemMenu)
}
})
}
})
//动态添加到现在的路由对象中去
router.addRoute(manageRoute)
}
}
}
到了这里,关于SpringBoot2+Vue2实战(十一)bug解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!