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

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

18.10.2023, 13:12. Показов 897. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Как генерируется мир в Minecraft
GameUnited 28.05.2025
Задумывались ли вы когда-нибудь о том, сколько песчинок на нашей планете? По приблизительным подсчетам - более 7 квинтиллионов! Это цыфра с 18 нулями. И все же, это даже не половина количества. . .
Один суперкластер Kubernetes для вообще всего
Mr. Docker 28.05.2025
Ваша компания развивается, количество сервисов множится, команды разработки разрастаются, а DevOps-инженеры начинают напоминать ту самую собаку из мема про "всё нормально, когда ничего не нормально". . . .
CAP-теорема или почему идеальной распределенной системы не существует
ArchitectMsa 28.05.2025
Вы переводите деньги со своего счета на счет друга. Казалось бы, что может быть проще? Вы открываете приложение банка, вводите сумму, жмете кнопку - и деньги мгновенно переходят с одного счета на. . .
Пишем первый чатбот на C# с нейросетью и Microsoft Bot Framework
UnmanagedCoder 28.05.2025
Microsoft Bot Framework представляет собой мощнейший инструментарий для создания разговорных интерфейсов любой сложности. Он предлагает целостную экосистему, которая включает SDK для C#, сервисы. . .
Event-Driven приложения с Apache Kafka и KafkaFlow в .NET
stackOverflow 26.05.2025
Для . NET разработчиков работа с Kafka традиционно сопряжена с определенными трудностями. Официальный клиент Confluent хорош, но часто требует написания большого количества шаблонного кода. Многие. . .
Квантовое программирование: Реализуем первый алгоритм на Q#
EggHead 26.05.2025
Квантовое программирование — одна из тех областей, которая ещё недавно казалась чем-то недоступным обычному разработчику. Многие представляют себе учёных в белых халатах, работающих с огромными. . .
Запилил скелет проекта физического симулятора.
Hrethgir 26.05.2025
Нзвание публикации "Вычислить VS запомнить — простой и экономичный пример организации обработки потока данных для физической симуляции". Пока только скелет, но всё - будет. . . .
Авто-векторизация в C с GCC 14
NullReferenced 25.05.2025
Современные процессоры давно перестали наращивать тактовую частоту как основной способ увеличения производительности. Вместо этого они обзавелись специализироваными блоками SIMD (Single Instruction,. . .
Типы данных в Python
py-thonny 25.05.2025
Когда я только начинал работать с Python, меня поразило, насколько органично типы данных встроены в синтаксис. Забавно, но факт: некоторые программисты, перешедшие с Java или C++, сначало даже не. . .
.NET Aspire и cloud-native приложения C#
stackOverflow 24.05.2025
. NET Aspire — новый продукт в линейке Microsoft, который вызвал настоящий ажиотаж среди разработчиков облачных приложений. Компания называет его "опинионированным, облачно-ориентированным стеком для. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru
OSZAR »