Похоже, вам не хватает атрибута name
в тэгах fragment
в файле макета активности. Существует два способа получить фрагмент, завышенный в вашей иерархии просмотров:
Кажется, что вы смешали эти две парадигмы вместе, что и вызывает у вас проблемы.
Чтобы сделать все в XML-макете, вы должны указать name
. Итак, что-то вроде этого:
<fragment
android:name="com.my.package.for.Frag1"
android:id="@+id/frag_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"/>
Затем вы можете удалить код из вашего метода initViews()
, поскольку он больше не нужен.
Если вместо этого вы предпочли бы делать все в коде, тогда вы должны изменить свой макет, чтобы указать пустой контейнер, куда будет идти фрагмент. Например, используйте FrameLayout
вместо тега fragment
, например:
<FrameLayout
android:id="@+id/frag_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"/>
Во-первых, добавив props: true
к вашему объекту маршрута, вы можете передать параметры маршрута в качестве реквизита вашего компонента PhysicianProfile
{
path: '/physicians/profile/:firstName-:lastName-:designation',
name: 'pd-profile',
component: PhysicianProfile,
props: true
},
. Затем вы можете добавить эти три реквизита к своему компоненту PhysicianProfile, и установите геттер Vuex для извлечения врача:
getters: {
// ...
getPhysicianByDetails: (state) => (firstName, lastName, designation) => {
return state.physicians.find(phys => phys.firstName === firstName && phys.lastName === lastName && phys.designation === designation)
}
}
Проверьте их для дальнейшего чтения
https://medium.com/vue-by-example / learn-fast-pass-params-as-props-with-vue-router-f4905735b747
Вы можете передать реквизит через URL-адрес, в данном случае, идентификатор врача. Затем вы можете получить врача в созданном крючке жизненного цикла:)
Чтобы упростить объяснение, я добавлю идентификатор на ваш путь (/ doctor / profile / id / firstName-lastName-обозначение) , Вы можете изменить метод поиска в созданном вами крюке, чтобы удовлетворить ваши потребности:)
// Router
{
path: '/physicians/profile/:id/:firstName-:lastName-:designation',
name: 'pd-profile',
component: PhysicianProfile,
props: true
},
Затем вам нужно установить реквизит и выбрать врача в PhisicianProfile.vue:
<template>
<div class="physician-profile">
<h1 class="mb-5">{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'pd-profile',
props: {
id: {
required: true
},
// rest of the props if needed
},
data () {
return {
msg: 'Physician Profile',
}
},
created () {
// Fetch the physician with based on this.id
const physician = this.$store.state.physicians.find((physician) => { return physician.id == this.id })
// Do something with physician (set to data and use in template)
}
}
</script>
Для получения дополнительной информации о передаче реквизита, проверьте vue router documentation :)