Зависимый от маршрутов компонент в vue

148
25 января 2018, 20:49

Всем привет.

Нужно сделать в 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: '/'
    }
  ]
})

Есть два вопроса:

  1. Как менять атрибут для Card на toggled = true при переходе на /leads/:id можно ли сделать "псевдо-путь" в роутах? (beforeRouteEnter и beforeRouteUpdate не подходят)

  2. Есть еще 2 простых (пустых) компонента - History и Events, которые нужно отображать в компоненте Card, в router-view в том случае, когда урлы будут следующие: /leads/:id/history /leads/:id/events

спасибо!

READ ALSO
Как сделать быстрый поиск с помощью регулярного выражения?

Как сделать быстрый поиск с помощью регулярного выражения?

Моя регулярка работает медленноКак ускорить процесс? Например, у меня есть такой хтмл текст test1<div>test2</div>

168
Обновление div в AJAX без перезагрузки

Обновление div в AJAX без перезагрузки

Подскажите, как в AJAX jQuery, сделать обновление одного конкретного <div>, без перезагрузки страницы:

149
background и прозрачность

background и прозрачность

У меня есть svg-файл для задника

119
Проблема с разрешением web speach

Проблема с разрешением web speach

Всем доброго времени суток, делаю что-то вроде приложения, есть html, css, js, хотел добавить web speech от chromeКод представлен ниже, хотя основная проблема...

173