Пользовательская обработка косых черт в идентификаторах маршрутизатора Vue - PullRequest
Новая
       10

Пользовательская обработка косых черт в идентификаторах маршрутизатора Vue

0 голосов
/ 01 июля 2018

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

Мой текущий маршрут выглядит так: 

{
    path: '/browse/:path*',
    component: browse,
    name: 'browse',
    displayName: 'Browse',
    meta: { title: 'Browse' },
},

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

Тем не менее, я хочу использовать часть идентификатора пути (:path*), чтобы содержать вложенную файловую систему, такую ​​как путь, который будет использоваться моей страницей просмотра.

Например, URL /browse/project/project1 приведет меня на два уровня вниз по дереву к элементу project1.

Теперь проблема, с которой я сталкиваюсь, заключается в том, что маршрутизатор vue экранирует мои идентификаторы (путь) при программной навигации, и мой URL заканчивается следующим образом: /browse/project%2Fproject1. Это не идеально и не выглядит хорошо для конечного пользователя. Кроме того, если пользователь перейдет к /browse/project/project1 вручную, приложение будет работать правильно и даже сохранит оригинальную кодировку в строке URL.

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

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

Есть ли в vue-router встроенный способ решить эту проблему? или я должен изменить, как я делаю вещи.

Ответы [ 2 ]

0 голосов
/ 05 июля 2018

Так что мне удалось исправить это с помощью небольшого взлома.

При создании моего экземпляра маршрутизатора Vue я присоединяю функцию beforeEach для замены любых исходящих кодировок '/'. Это отправит клиенту правильный URL-адрес, который я ищу. 

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

router.beforeEach((to, from, next) => {
    // hack to allow for forward slashes in path ids
    if (to.fullPath.includes('%2F')) {
        next(to.fullPath.replace('%2F', '/'));
    }
    next();
});
0 голосов
/ 04 июля 2018

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

Думаю, это потому, что идентификатор должен идентифицировать один единственный ресурс, а не вложенную структуру / путь к ресурсу.

Хотя я еще не решил свою проблему, вероятно, вы захотите использовать строку customQueryString:

https://router.vuejs.org/api/#parsequery-stringifyquery

https://discourse.algolia.com/t/active-url-with-vue-router-for-facet-and-queries/3399

...