Всем привет.
Нужно сделать в VUE компонент, который будет работать на всех страницах, но при этом изменяться при определенных маршрутках. например, у меня есть компонент APP:
<template lang="pug">
#app
call-card
router-view
</template>
<script>
export default {
name: 'App',
components: {
'call-card': Card
}
}
</script>
Код компонента Card:
<template lang="pug">
div
button(@click="toggle = !toggle")
.row(v-if="!toggled")
h3 Full view
router-view
.row(v-else)
h3 Small view
</template>
<script>
export default {
name: 'Card',
data () {
toggled: false
}
}
</script>
в файл router.js содержатся несколько страниц
export default new Router({
mode: 'history',
routes: [
{
path: '',
name: 'home',
components: {
default: Home
}
},
{
path: '/settings',
name: 'settings',
component: (resolve) => {
require.ensure(['@/components/settings/Settings'], () => {
resolve(require('@/components/settings/Settings'))
})
},
children: [{
path: 'profile',
name: 'profile',
component: (resolve) => {
require.ensure(['@/components/settings/Profile'], () => {
resolve(require('@/components/settings/Settings'))
})
}
}]
},
{
path: '*',
redirect: '/'
}
]
})
Есть два вопроса:
Как менять атрибут для Card на toggled = true при переходе на /leads/:id можно ли сделать "псевдо-путь" в роутах? (beforeRouteEnter и beforeRouteUpdate не подходят)
Есть еще 2 простых (пустых) компонента - History и Events, которые нужно отображать в компоненте Card, в router-view в том случае, когда урлы будут следующие: /leads/:id/history /leads/:id/events
спасибо!
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости