1. プロジェクトが開始したら、localhost:8080 と入力し、404 に直接ジャンプします。
ルートを変更する
ルーター/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()
})
2.個人情報404ページ
ルーター/index.js
const manageRoute = {
path: '/',
name: 'Manage',
component: () => import('../views/Manage.vue'),
redirect: "/home",
children: [
{
path: '/person',
name: '个人信息',
component: () => import('../views/Person.vue'),
},
]
}
3. 新しいページ 404
1. 新しいページを作成する
2. ページにメニューを追加します
3. 管理者にメニューを割り当てる
3. 再度ログインします
4. 割り当てたばかりのメニューをクリックします
5.404
ルーター/index.js
//提供一个重置路由的方法
export const resetRouter=()=>{
router.matcher = new VueRouter({
mode:'history',
base:process.env.BASE_URL,
routes
})
}
ストア/index.js
logout(){
localStorage.removeItem("user")
localStorage.removeItem("menus")
router.push("/login")
//重置路由
resetRouter()
}
ルートの作成を最適化して、頻繁に作成されないようにする
//注意刷新页面会导致重置路由
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)
}
}
}