Эта статья также размещена в моем блоге,Добро пожаловать на просмотр 😄
написать впереди
После разделения фронтенда и бэкенда ответственность за управление маршрутными переходами переносится на фронтенд, а бэкенд отвечает только за возврат html-документа на фронтенд и предоставление различных интерфейсов. Два проекта, которые мы используем в качестве примеров ниже, используют vue в качестве базовой структуры, один является приложением SPA, а другой представляет собой многостраничное приложение, оба из которых маршрутизируются и отображаются внешним интерфейсом.
Главная идея
Будь то одна страница или несколько страниц, моя идея реализации состоит в том, чтобы настроить страницу 404 в целом.path: '/404'route, визуализируйте соответствующую страницу 404. В то же время настройте правило для автоматического перенаправления на страницу 404, когда не удается сопоставить все маршруты в доступной пользователю таблице маршрутизации. Давайте поговорим о моих различных методах реализации для одностраничного и многостраничного контента.
Конфигурация маршрутизации 404 для SPA
Одностраничное приложение настраивает страницу 404, а также различает две ситуации:
Фиксированная таблица маршрутизации
Если таблица маршрутизации SPA фиксирована, то настройка страницы 404 становится очень простой. Просто добавьте путь к таблице маршрутизации как404маршрутизация, при этомв самом низу таблицы маршрутизацииНастройте путь как*Маршрут, перенаправление на маршрут 404.
(Поскольку таблица маршрутизации сопоставляется сверху вниз, вы должны поместить любое правило сопоставления в конец, иначе все маршруты в соответствии с этим правилом маршрутизации перейдут на 404, что не может быть сопоставлено правильно.)
// router.js
export default new Router({
mode: 'history',
routes: [
// ...
{
name: '404',
path: '/404',
component: () => import('@/views/notFound.vue')
},
{
path: '*', // 此处需特别注意至于最底部
redirect: '/404'
}
],
})
Динамически генерируемая таблица маршрутизации
Когда таблица маршрутизации создается динамически, то есть таблица маршрутизации делится на две части, одна часть представляет собой базовую таблицу маршрутизации, а другая часть представляет собой таблицу маршрутизации, которую необходимо динамически генерировать в соответствии с информацией о разрешениях пользователя. .
Динамически генерируемые маршруты в этом проекте используют метод addRoutes, поставляемый с vue-router, который вводит новые правила маршрутизации в конец исходного массива таблицы маршрутизации. Поскольку любое правило, соответствующее перенаправлению на страницу 404, должно находиться в нижней части таблицы маршрутизации, здесь я извлеку правило, которое перенаправляет на страницу 404, и внедрим правило перенаправления после внедрения динамического маршрута, чтобы гарантировать, что правило маршрут в нижней части таблицы.
// router.js
export default new Router({
mode: 'history',
routes: [
// ...
{
name: '404',
path: '/404',
component: () => import('@/views/notFound.vue')
},
// ...other codes
],
})
// notFoundRouterMap.js
export default [
{
path: '*',
redirect: '/404'
}
]
// main.js
//...other codes
router.beforeEach((to, from, next) => {
new Promise((resolve, reject) => {
if (getCookie(tokenName)) {
if (!getInfo()) {
Promise.all([store.dispatch('getBasicInfo'), store.dispatch('getUserDetail')]).then(res => {
store.dispatch('GenerateRoutes', { roles }).then(() => {
// 根据用户权限生成可访问的路由表
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
router.addRoutes(NotFoundRouterMap) // 添加404及重定向路由规则
resolve({ ...to, replace: true }) // 重新加载一次路由，让路由表更新成功后走下面else的判断
})
})
} else {
// ...other codes
}
} else {
window.location.href = '/login.html'
}
}).then(res => {
if (res) {
next(res)
} else {
next()
}
}).catch(err => {
new Error(err)
next(false)
})
Конфигурация маршрутизации 404 для многостраничных приложений
Отличие многостраничных приложений от SPA в том, что у каждой страницы свой набор маршрутов, и у каждой страницы может быть свой набор стилей 404 страницы, конечно может и не быть. В настоящее время метод динамического добавления правил маршрутизации больше не может быть использован.
Решение, которое я принял, состоит в том, чтобы оценить ситуацию сопоставления маршрутов в глобальной навигационной защите перед каждым, В настоящее время мне нужно использовать навигационную защиту vue.matchedмассив тоже. Если ничего не совпадает, то редирект на страницу 404. Конечно, эта страница 404 также устанавливается как отдельная страница.
// permission.js
//...other codes
router.beforeEach((to, from, next) => {
new Promise((resolve, reject) => {
// ...other codes
}).then(res => {
if (!to.matched.length) {
window.location = '/error.html#/404'
return
}
if (res) {
next(res)
} else {
next()
}
}).catch(err => {
new Error(err)
next(false)
})
Это решение позволяет каждой странице иметь свои собственные правила маршрутизации страницы 404 и единообразно настраивает страницу 404 по умолчанию для маршрутов, которые не настроены со страницами 404, что кажется более удобным.
наконец
Это решение, которое я использовал в процессе разработки. Если есть лучший метод, дайте мне знать, спасибо!
Выполняя эту практику, я многому научился из статей братьев и перечислил их здесь, чтобы выразить свою благодарность!