Как достичь n уровней вложенных динамических маршрутов в Vue.js?

Я хочу достичь n уровней динамических вложенных маршрутов в Vue.js, где n мне неизвестно. для например -

abc.com/ctx-path/component/1/2/...../n

где 1,2, ... n - уровни

Как я могу добиться этого с помощью Vue-router?


vue.js vue-router dynamic-routing nested-routes routing
person Ayan Dalal    schedule 03.04.2019    source источник

Ответы (3)


arrow_upward
6
arrow_downward

За кулисами сопоставления путей vue-router используется путь к регулярному выражению. Итак, должно быть возможно написать что-то вроде этого

{ path: '/ctx-path/component/:id+', component: Component }

or

{ path: '/ctx-path/component/:id*', component: Component }

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

Последний вариант - иметь поймать весь маршрут и добавить свою логику.

person Radu Diță    schedule 03.04.2019
comment
Вы предлагаете использовать подстановочный знак для сопоставления регулярных выражений. Но я хочу открывать разные страницы для разных маршрутов. например: путь: '/ctx-path/component/1/2/..../id1/.....n' и путь: '/ ctx-path / component / 1/2 / .... /id2/.....n 'должен открывать 2 разные страницы. - person Ayan Dalal; 03.04.2019
comment
@Radu Diță Может быть, ты сможешь мне помочь. Посмотрите на это: stackoverflow.com/questions/57836601/ - person Success Man; 08.09.2019

arrow_upward
0
arrow_downward

Это из документов:

const router = new VueRouter({
    routes: [
        { path: '/user/:id', component: User,
            children: [
                {
                // UserProfile will be rendered inside User's <router-view>
                // when /user/:id/profile is matched
                path: 'profile',
                component: UserProfile
                },
                {
                // UserPosts will be rendered inside User's <router-view>
                // when /user/:id/posts is matched
                path: 'posts',
                component: UserPosts
                }
            ]
       }
   ]
})

см. ссылку https://router.vuejs.org/guide/essentials/nested-routes.html

person Alex Nick    schedule 03.04.2019
comment
вопрос в том, что, если ‹profile› или ‹posts› в этом примере ТАКЖЕ динамические. - person George Katsanos; 14.10.2019

arrow_upward
0
arrow_downward

Двойные динамические вложенные маршруты для фильтрации одного представления по параметрам вложенного URL

const routes = [
  {
    path: '/category/:categoryId',
    name: 'category',
    component: () =>
      import(/* webpackChunkName: "product" */ '../views/Categories.vue'),
    props: (route: Route) => ({
      categoryId: route.params.categoryId,
    }),
  },
  {
    path: '/category/:categoryId/:attributeIdsJsonString',
    name: 'attributeFilter',
    component: () =>
      import(/* webpackChunkName: "product" */ '../views/Categories.vue'),
    props: (route: Route) => ({
      categoryId: route.params.categoryId,
      attributeIdsJsonString: route.params.attributeIdsJsonString,
    }),
  },
];

const router = new VueRouter({
  routes,
});

Использование других имен маршрутов, подобных этому, будет означать, что beforeRouteUpdate в некоторых случаях не сработает, поэтому используйте также beforeRouteEnter

person ness-EE    schedule 19.06.2020