Форум программистов, компьютерный форум, киберфорум
Vue.js
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 18.10.2023
Сообщений: 1

Vue-router загружает компонент другого роута при использовании Memory mode

18.10.2023, 13:12. Показов 1121. Ответов 1

Студворк — интернет-сервис помощи студентам
Здравствуйте. Создал сборку vite + vue3 + vuetify3 + nodejs, для реализации SSR. При настройке vue-router использую Memory mode и сталкиваюсь с проблемой, что если я совершаю переход на какой-либо роут, кроме корневого, в браузере начинает сначала грузится нужный компонент, но затем сразу загружается компонент корневого роута. Такого не происходит, если редирект будет производится через методы vue-router (router.push('/entrance')), в этом случае все отрабатывает корректно.
Это корректное поведение или нет? Есть ли какой-то способ обойти это?

У меня на стороне nodejs, в настройках роутера express добавлен мидлвар, который должен отлавливать все запросы, поступающие в серверную и клиентскую части, проверять авторизован ли пользователь и, в случае если нет, редиректить на страницу авторизации/регистрации. Можно ли это как-то реализовать, или стоит рассмотреть другой вариант архитектуры проекта?

vue-router:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import {
  createMemoryHistory,
  createRouter as _createRouter,
  createWebHistory,
} from "vue-router";
 
const routes = [
  {
    path: '/',
    redirect: '/'
  },
  {
    path: '/playground',
    component: () => import('../views/PlaygroundView.vue'),
    meta: {
      layout: 'MainLayout'
    }
  },
  {
    path: '/entrance',
    component: () => import('../views/EntranceView.vue'),
    meta: {
      layout: 'EntranceLayout'
    }
  }
];
 
export const createRouter = () =>
  _createRouter({
    history: import.meta.env.VITE_SSR
      ? createMemoryHistory('/')
      : createWebHistory('/'),
    routes,
  });


server.js:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  app.use(passport.initialize());
  app.use(passport.session());
  app.use('(?!(/api/login|/api/signup|/api/log/add|/entrance|/socket.io))' , authCheckMiddleware)
 
  createApiRoutes(app, passport)
 
  app.use('(?!(^\/api\b/))', async (req, res) => {
    try {
      const url = req.originalUrl;
      let template = await getIndexHTML();
 
      let render = null;
      if (isProd) {
        render = (await import('./dist/server/main-server.js')).render;
      } else {
        template = await vite.transformIndexHtml(url, template);
        render = (await vite.ssrLoadModule(resolve('./src/main-server.js'))).render;
      }
 
      const [appHtml, preloadLinks] = await render(url, manifest);
 
      const html = template
        .replace(`<!--preload-links-->`, preloadLinks)
        .replace('<!--app-html-->', appHtml)
 
      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
 
    } catch (err) {
      if (vite) {
        vite.ssrFixStacktrace(err)
      }
 
      res.status(500).end(err.stack);
    }
  })
 
  return {server, vite}


middleware.js:
JavaScript
1
2
3
4
5
6
7
8
9
10
const authCheck = function (req, res, next) {
  if (req.isAuthenticated()) {
    req.session.authenticated = true;
    return next();
  }
    
  res.redirect('/entrance');
}
 
export { authCheck }
Вложения, ожидающие проверки
Тип файла: png Снимок экрана 2023-10-18 130450.png
Тип файла: png Снимок экрана 2023-10-18 130652.png
Тип файла: png Снимок экрана 2023-10-18 130726.png
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
18.10.2023, 13:12
Ответы с готовыми решениями:

Объект в url при использовании vue-router
Привет. Собственно сабж. Laravel 8 vue3 app.js require('./bootstrap') import { createApp } from 'vue' import {createRouter,...

Vue-router не отображает компонент по ссылке
Здравствуйте, столкнулся с определенной проблемой. Для перехода использую vue-router. Страницы описываю в файлах .vue. Так вот когда...

Анимация роута в vue.js
как реализовать анимация компонента при переходе на другой роут анимация появления компонента с низу к верху Пример моего кода: ...

1
18.10.2023, 13:13
 Комментарий модератора 
Коды должны быть в текстовом виде, уважайте других участников форума.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
18.10.2023, 13:13
Помогаю со студенческими работами здесь

Vue ошибки при использовании Async Await
Добрый день. Начал пробовать вливаться в VUE. Пишу приложение в котором необходимо проходить регистрацию и аутентификацию И на этапе...

Возможно ли использовать относительный (./) путь к js при использовании React-router ?
Собственно вопрос. &lt;script type=&quot;text/javascript&quot; src=&quot;js/main.js&quot;&gt;&lt;/script&gt; При роутинге от корня ( например /contacts или /info )...

Как подключить шрифты на vue 3 при использовании препроцессора SCSS?
Не подключаются шрифты в проекте написанном на VUE 3 с использованием препроцессора SCSS. Т.е., когда я в главном(или дочернем) по...

Vue 2 и router 4
Юзаю Vue js версии 2. Не перехожу на 3, потому что bootstrap vue не поддерживает vue 3, только 2. Вопрос: можно ли юзать Vue Router...

Vue-router не хочет работать
Собственно идея такая, по нажатию кнопки должна отображаться страница /contacts но по ходу vue-router не подключен или работает не так...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
Фото: Daniel Greenwood
kumehtar 13.11.2025
Расскажи мне о Мире, бродяга
kumehtar 12.11.2025
— Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru