vue-router: передача свойств в компоненты при использовании именованных представлений

Я использую именованные представления внутри своего vue-router. Внутри обоих компонентов мне нужно достать реквизит.

Следующие коды показывают определение маршрутов. Первая запись не работает. Внутри компонента свойства не будут определены. Таким образом, компоненты Breadcrumb и Collection не имеют свойства

Второй пример работает, потому что есть только один компонент:

const routes = [
    {
        path: '/:cid',
        name: 'collection',
        props: true,
        components: {
            default: Collection,
            breadcrumb: Breadcrumb
        }
    },
    {
        path: '/:cid/:iid',
        name: 'item',
        props: true,
        component: Item
    },
]

Я думаю, что свойство props просто работает, когда есть только один компонент.

Я не нашел решения в документации, поэтому любая помощь приветствуется.


vue.js vue-router
person apxp    schedule 22.02.2017    source источник

Ответы (3)


arrow_upward
24
arrow_downward

Да, вы можете использовать несколько компонентов и передавать реквизиты каждому из них:

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        foo: Foo
      },
      props: {
        default: { name: 'Home' },
        foo: { name: 'Foo' }
      }
    }
  ]
})

http://jsfiddle.net/jonataswalker/ykf0uv0d/

См. обсуждение по теме.

person Jonatas Walker    schedule 22.02.2017
comment
эти значения могут быть взяты из основного приложения? - person Martian2049; 25.08.2017
comment
Этот ответ был полезен. Однако я не устанавливаю значения prop в конфигурации маршрутов, а в тегах ‹router-link›. Поэтому мне пришлось установить props: {default: true}, чтобы заставить его работать. - person Tim; 02.09.2020

arrow_upward
2
arrow_downward

Если вам нужен весь реквизит:

routes: [
    {
      path: '/',

      components: {
        default: Home,
        foo: Foo
      },

      props: {
        default: true,
        foo: true
      }


    }
  ]
person Neekobus    schedule 21.05.2019

arrow_upward
0
arrow_downward

В компонентах вы должны явно объявить props из-за установки props в true в объекте маршрута, параметры маршрута привязаны к props.

// Collection component
export default {
 props: ['cid'],
 template: ...,
}

// Breadcrumb component

export default {
 props: ['cid', 'iid'],
 template: ...,
}

Ознакомьтесь с документацией здесь о передаче props в компонент Route.

Передача свойств в компонент Route

person Srinivas Damam    schedule 22.02.2017
comment
Просто замечу: это было бы тривиальным решением (для тривиальной ошибки), не связанным с именованными маршрутами. Принятое решение является здесь актуальным. - person B M; 23.09.2017