Vue router - дополнительные группы маршрутов

У меня есть вопрос о vue-router. Как я мог выполнить маршрут/маршруты следующим образом:Vue router - дополнительные группы маршрутов

example.com/blog/category/value/tags/value/page/value

Категория, теги и страница должны быть необязательными.

Так что если я нахожусь example.com/blog/category/value/page/value - он должен загрузить тот же компонент.

Я использую vue 2.

Спасибо!

источник

2016-10-02 Paulius Krutkis

вы ищете динамическую проверку соответствия это [Docs] (HTTPS: //router.vuejs.org/en/essentials/dynamic-matching.html) –

да, я проверил документы, я также проверил примеры на github, но они не отвечают на мой вопрос. Не могли бы вы привести мне пример или указать мне в правильном направлении? –

попробовать этот

const Blog = { 
    template: `<div>Blog 
    <h3>{{ $route.params.category }} {{ $route.params.page }}</h3> 
    </div>` 
}; 

const router = new VueRouter({ 
    routes: [ 
    { path: '/blog(/category/)?:category([^\/]+)?(/page/)?:page?', component: Blog } 
    ] 
}); 

const app = new Vue({ router }).$mount('#app');

HTML:

<div id="app"> 
    <p> 
     <router-link to="/blog">blog</router-link> 
     <router-link to="/blog/category/cat1/page/page1">/blog/link1</router-link> 
     <router-link to="/blog/category/cat2/page/page2">/blog/link2</router-link> 
    </p> 
     <router-view></router-view> 
</div>

Vue-router

источник

2016-10-03 12:06:49

Хм, похоже, работает по большей части. Единственные проблемы, которые я вижу в этом, - это то, что когда вы идете на маршрут, например: example.com/blog/category/test : значение категории делится, только получение первого символа значения, например test, будет be 't', а остальным присваивается значение: page, которое будет «est». Но если вы поедете example.com/blog/page/test, то все будет хорошо. –

@PauliusKrutkis попробуйте мой новый ответ –

Да, теперь он работает как ожидалось, спасибо! У меня есть еще одна проблема, но я думаю, что это выходит за рамки этого вопроса. Трудно ссылаться на этот маршрут в коде. Прямо сейчас: /blog/link1 будет работать нормально, но мне нужно сделать более сложную логику этой структуры, Я надеялся, что могу ссылаться на этот маршрут по имени link но происходит то, что результат будет следующим:/blogtest2: /, но спасибо в любом случае! –

Вы можете иметь несколько динамических сегментов в одном и том же маршруте.

const router = new VueRouter({ 
routes: [ 
    // dynamic segments start with a colon 
    { 
     path: 'blog/category/:category_value/page/:page_value', 
     component: Blog 
    }, 
    { 
     path: 'blog/category/:category_value/tags/:tags_value/page/:page_value', 
     component: Blog 
    } 
    ] 
})

И вы можете иметь похожие шаблоны маршрутов исходя из ваших требований.

Теперь, когда ваш визит страница, которая является: example.com/blog/category/:category_value/page/:page_value вы будете иметь : category_value и: page_value доступны в $ route.params.category_value и $ route.params .page_value соответственно.

См документации здесь: https://router.vuejs.org/en/essentials/dynamic-matching.html

источник

2016-10-03 06:23:53 Deepak

В категории вашего примера, теги и параметры страницы необязательны, если я иду example.com/blog, компонент не будет отображаться. Также, если я иду example.com/blog/category/value - нет компонента. Это не то, что я хочу, поскольку я сказал, что мне нужно сделать так, чтобы все параметры были необязательными. Как я могу достичь этого, не написав все возможные результаты? –

Vue router - дополнительные группы маршрутов

ответ

Смежные вопросы