Как организовать vue router в приложении с модальными окнами?

Question

[NiceScript]

Суть в том, что половина страниц в проекте должны быть модальными окна, которые открываются по верх той страницы, на которой его открыли.

Вопрос заключается в том как организовать роутинг.
Модальные окна должны иметь свой url и если по нему перешли без истории то открывается базовая страница с окном поверх.

То есть есть страница заметок, в ней открыли заметку, модальное открылось поверх страницы заметок. В заметке указан товар. Нажали товар и открылся товар в модальном окне поверх этого.
Вообщем любое количество модальных окон с роутингом нужна.

При закрытии по истории возвращаем на предыдущую иначе на базовую

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

Comments

[alex-1917]

блин, постоянно делаю такое, как на якорях, так и на красивых урлах, но увы только на ванильке, ко всему китайскому у меня аллергия...

[NiceScript]

alex-1917, а там какой принцип?

[alex-1917]

NiceScript,
библиотека примерно такая, их полно всяких разных в гуглах:

spoiler

class Router{routes=[];mode=null;root='/';constructor(options){this.mode=window.history.pushState?'history':'hash';if(options.mode)this.mode=options.mode;if(options.root)this.root=options.root;this.listen()}
add=(path,cb)=>{this.routes.push({path,cb});return this};remove=path=>{for(let i=0;i<this.routes.length;i+=1){if(this.routes[i].path===path){this.routes.slice(i,1);return this}}
return this};flush=()=>{this.routes=[];return this};clearSlashes=path=>path.toString().replace(/\/$/,'').replace(/^\//,'');getFragment=()=>{let fragment='';if(this.mode==='history'){fragment=this.clearSlashes(decodeURI(window.location.pathname+window.location.search));fragment=fragment.replace(/\?(.*)$/,'');fragment=this.root!=='/'?fragment.replace(this.root,''):fragment}else{const match=window.location.href.match(/#(.*)$/);fragment=match?match[1]:''}
return this.clearSlashes(fragment)};navigate=(path='')=>{if(this.mode==='history'){window.history.pushState(null,null,this.root+this.clearSlashes(path))}else{window.location.href=`${window.location.href.replace(/#(.*)$/, '')}#${path}`}
return this};listen=()=>{clearInterval(this.interval);this.interval=setInterval(this.interval,50)};interval=()=>{if(this.current===this.getFragment())return;this.current=this.getFragment();this.routes.some(route=>{const match=this.current.match(route.path);if(match){match.shift();route.cb.apply({},match);return match}
return!1})}}

затем инициация:

spoiler

const router = new Router({
  mode: 'history',
  root: '/'
});

router
  .add(/about/, () => {
    //about page controller
  })
  .add(/products\/(.*)\/specification\/(.*)/, (id, specification) => {
  })
    .add(/items\/(.*)/, (id) => {
	getProductPage(id);
  })
  .add('', () => {
    // general controller
	getMainPage();
  });

затем работаем, например кликаю на пункт меню - вызываю вот такую функцию:
router.navigate(this.getAttribute('href'));
у тебя - добавлять в адрес вызываемое окно (якорем или GET-парамером пофиг) и ловить этот параметр в скрипте, дальше дело техники

Answer 1

[Антон Антон]

Поскольку при переходе по ссылке что-то еще должно быть под модальным окном, то тут, скорее всего подойдут вложенные маршруты. Ну или в query "родительского маршрута" передавать признак открытия диалога и пробрасывать его в props или повесить watch на '$route.query.Признак'.

Comments

[NiceScript]

Чтобы вложенные маршруты работали так, чтобы любое модальное окно открывалось на любой статической странице будет сгенерированно куча роутов. Думаю этот способ не подойдёт.
Можно подробней, пожалуйста?

[Антон Антон]

NiceScript,

будет сгенерированно куча роутов.

ну тут зависит от вашей фантазии. вообще если роуты динамические, то добавить child к каждому роуту, если через route.query, то не надо, но больше кода в каждом компоненте.

[NiceScript]

Антон Антон, буду пробовать с childами. Спасибо