@reasonov

Как исправить ошибку 404 при динамической генерации url?

Всем привет, такой вопрос, у меня есть vue приложение, оно запускается по ссылке вида "www.app/id/", id это число, которое определяется при запуске. Когда приложение запускается на сервере и подставляется этот id, то страница выдает ошибку 404, как можно с этим бороться? Скриншот ошибки приложил62bd1ed73f048535245432.png
  • Вопрос задан
  • 39 просмотров
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
Об этом в документации отдельным разделом написано
https://v3.router.vuejs.org/ru/guide/essentials/hi...

Возникает, однако, и проблема: поскольку наше приложение — одностраничное, не сконфигурировав соответствующим образом сервер мы заставим пользователей получать ошибку 404, если они перейдут по http://oursite.com/user/id напрямую. Вот это уже прекрасным не назвать.

Не спешите расстраиваться: всё, что нужно — единственная "резервная" запись в конфигурации сервера. Если URL не совпадает ни с одним статическим файлом, сервер должен просто отдать index.html, в котором и живёт наше приложение. И снова, прекрасно!
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
firedragon
@firedragon
Senior .NET developer
А кто будет вместо вас настраивать пути?
# ловим все запросы к спа и перенаправляем на индекс, 404 обрабатываем в нем же
<Directory ~ "^/[\w+\d+-]+">
  FallbackResource /index.html
</Directory>

# отдельно обрабатываем статику
<Files ~ "\.(js|css|gif|jpe?g|png)$">
  FallbackResource disabled
  ErrorDocument 404 "File not found"
</Files>


// Imports
import Vue from 'vue'
import Router from 'vue-router'
import { authGuard, logoutHabdler } from '@/helpers'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  scrollBehavior: (to, from, savedPosition) => {
    if (to.hash) return { selector: to.hash }
    if (savedPosition) return savedPosition

    return { x: 0, y: 0 }
  },
  routes: [
    {
      path: '/logout',
      beforeEnter: logoutHabdler,
    },
    {
      path: '/',
      component: () => import('@/layouts/home/Index.vue'),
      children: [
        {
          path: '',
          name: 'Home',
          component: () => import('@/views/home/Index.vue'),
        },

        {
          path: 'about',
          name: 'About',
          component: () => import('@/views/about/Index.vue'),
        },
        {
          path: 'description',
          name: 'Description',
          component: () => import('@/views/description/Index.vue'),
        },
        {
          path: 'price',
          name: 'Price',
          component: () => import('@/views/price/Index.vue'),
        },
        {
          path: 'login',
          name: 'Login',
          component: () => import('@/views/login/Index.vue'),
        },
        {
          path: 'legal',
          name: 'Legal',
          component: () => import('@/views/home/Legal.vue'),
        },
        {
          path: 'eula',
          name: 'Eula',
          component: () => import('@/views/home/Eula.vue'),
        },
        {
          path: 'condition',
          name: 'Condition',
          component: () => import('@/views/home/Condition.vue'),
        },
        {
          path: 'disclosure/:id?',
          name: 'Disclosure',
          component: () => import('@/views/home/Disclosure.vue'),
        },
        {
          path: 'userlist/:id?',
          name: 'UserList',
          component: () => import('@/views/home/UserList.vue'),
        },
        {
          path: 'open/:id?',
          name: 'SuccessorList',
          component: () => import('@/views/home/SuccessorList.vue'),
        },
      ],
    },
    {
      path: '/user',
      component: () => import('@/layouts/user/Index.vue'),
      beforeEnter: authGuard,
      children: [
        {
          path: '',
          name: 'UserHome',
          component: () => import('@/views/user/Index.vue'),
        },
        {
          path: 'store/:id?',
          name: 'UserStore',
          component: () => import('@/views/user/Store.vue'),
        },
        {
          path: 'faq',
          name: 'UserFaq',
          component: () => import('@/views/user/Faq.vue'),
        },
        {
          path: 'messages',
          name: 'UserMessages',
          component: () => import('@/views/user/Messages.vue'),
        },
        {
          path: 'contacts',
          name: 'UserContacts',
          component: () => import('@/views/user/Contacts.vue'),
        },
        {
          path: 'profile',
          name: 'UserProfile',
          component: () => import('@/views/user/Profile.vue'),
        },
        {
          path: 'payment/:id',
          name: 'Payment',
          component: () => import('@/views/user/Payment.vue'),
        },
      ],
    },
    {
      path: '*',
      component: () => import('@/layouts/user/Page404.vue'),
      children: [
        {
          path: '*',
          name: 'Page404',
          component: () => import('@/views/user/Page404.vue'),
        },
       ],
  },
  ],
})

export default router
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы