path-to-regexp Найти регулярное выражение, соответствующее маршруту

Question

Я добавляю динамические дочерние компоненты во время загрузки страницы. Добавление дочерних маршрутов в OnCreated of parent не заставляет страницу работать, когда мы обновляем страницу.

Следовательно, я анализирую шаблоны страниц (как я их знаю, когда страница загружается).

Я сейчас ищу способ узнать маршрут, который соответствует HREF. Vue-js использует path-to-regexp, и мой вопрос очень прост.

Я хочу знать соответствующий компонент

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User },
    { path: '/foo/bar', component: FooBar },

  ]
})    

// Reverse of this
var matchingComponent = howDoIDothis(/foo/bar) // this should give me the matching 

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

Answer 1

Вам нужно использовать маршрутизаторы Vue router.getMatchedComponents метод. Однако этот метод требует, чтобы ваш маршрутизатор был полностью инициализирован со всеми маршрутами. Иначе нет пути. Vue-router не предоставляет основные проанализированные регулярные выражения, с которыми вы можете сравнить ваши href,

Кроме того, то, что вы пытаетесь сделать, - это не самый идиоматичный способ работы в одностраничных приложениях. Хорошей практикой является объявление всех ваших маршрутов заранее в некотором файле JS, с помощью которого вы должны инициализировать свой маршрутизатор. Конечно, вы захотите защитить определенные маршруты, для которых вы должны использовать охрану маршрутов.

Наконец, когда все ваши маршруты объявлены заранее, это означает, что все компоненты заранее объединены в один большой файл JS. Чтобы избежать этого, оберните ваш компонент в async упаковщики и упаковщик, такие как Webpack, были бы достаточно умны, чтобы разбить пакет на несколько небольших файлов.