Несколько приложений в Vue.js v3 с использованием vue-маршрутизатора

#vue.js #vue-router #vuejs3

#vue.js #vue-маршрутизатор #vuejs3

Вопрос:

Я пытаюсь создать сайт, на котором будут разные приложения в зависимости от роли пользователя. Первоначальная идея — иметь 3 приложения. Первый из них является общим. Здесь вы найдете страницу входа в систему, форму регистрации, забыли пароль. Когда пользователь входит в систему, я проверяю его роль и отправляю его в нужное приложение (администратор, клиент, поставщик). Я хочу разделить многие компоненты между приложениями, но сохранить макеты экранов независимо.

Вот структура моего сайта (ее можно улучшить):

 /index.html - (General app) - It will load the general app with a <router-view> to render the other general site components
/Register - (General app) - Form for the user registers to the site. It should render in the "index.html" <router-view>
/ForgotPass - (General app) - Recover you pass. It should render in the "index.html" <router-view>
/Admin/index.html - (Admin app) - Index page for the admin page. It will have its own router and a <router-view> element
/Admin/Dashboard - (Admin app) - Component to render into the "/Admin/index.html" <router-view>
/Client/index.html - (Client app) - Index page for the admin page. It will have its own router and a <router-view> element
/Client/Dashboard - (Client app) - Component to render into the "/Admin/index.html" <router-view>
 

И моя структура папок:

 ├─ components/
│  ├─ SharedComponent1.vue
│  ├─ SharedComponent2.vue
├─ sites/
│  ├─ admin/
│  │  ├─ adminApp.vue
│  │  ├─ index.html
│  │  ├─ main.js
│  │  ├─ router.js
│  ├─ clients/
│  │  ├─ clientsApp.vue
│  │  ├─ index.html
│  │  ├─ main.js
│  │  ├─ router.js
├─ App.vue
├─ main.js
├─ router.js
index.html
vue.config.js
 

Моя проблема в том, что я хочу перенаправить пользователя на /sites/admin (или /sites/admin/index.html ) и сделайте так, чтобы браузер загружал новое приложение из /sites/admin/index.html , vue-маршрутизатор пытается найти этот путь в списке путей, чтобы отобразить его в /index.html элемент. Он не может найти путь и выходит из строя.

Есть ли какой-нибудь способ сделать это? Основная цель — иметь независимые приложения для этих ролей, но совместно использовать компоненты. Если мне понадобятся какие-либо изменения для его развертывания в prod, пожалуйста, дайте мне знать.

Комментарии:

1. Почему ты так сильно ненавидишь себя? У вас может быть просто один маршрутизатор и разные компоненты.

2. Я просто играю с идеей. Я вижу, что каждое приложение растет, и мне нравится идея позволить им работать независимо.

3. Вы можете создавать их независимо, используя разные компоненты.