Vuepress боковая панель для изменения в зависимости от элемента навигации - PullRequest
Новая
       15

Vuepress боковая панель для изменения в зависимости от элемента навигации

0 голосов
/ 02 октября 2019

Мне нужна навигационная панель VuePress, содержащая слова «student», «instructor», «admin», чтобы изменять элементы боковой панели в зависимости от выбранного типа пользователя.

Следующее близко, но не совсем работает. Я вижу, что конфигурация обновлена, но система реагирования не видит изменений. И причина этого ясна из-за того, что компонент SideBar темы по умолчанию вычисляет элементы боковой панели (см. Код ниже). В вычислениях используется функция с четырьмя свойствами. Одним из них является $ site с вложенным свойством themeConfig со свойством sidebars.

ehanceApp.js 

import navigator from './navigator'
const shared = {}

export default ({ Vue, options, router, siteData }) => {
  shared.siteData = siteData
  shared.install = function(){
    Object.defineProperty(Vue.prototype, '$myGlobalStuff', {
      get () { return shared }
    })
  }
  Vue.use(shared)
  Vue.component('navigator', navigator)
}

navigator.vue 

<template>
  <div>Navigator {{$route.path}}</div>
</template>

<script>
import getSideBar from './sidebar'

export default {
  methods: {
    setSideBar () {
      let sb = getSideBar(this.$route.path)
      if (sb) {
        console.log('load ' + this.$route.path + ' sidebar', this.$myGlobalStuff)
        this.$myGlobalStuff.siteData.themeConfig.sidebar = sb
        // this.$nextTick(function () {
        //   this.$myGlobalStuff.router.push(this.$route.path)
        //   this.$emit('toggle-sidebar', true)
        //   this.$root.$forceUpdate()
        // })
      } else {
        console.log('No sidebar found for ', this.$route.path)
      }
    }
  },
  mounted: function () {
    this.setSideBar()
  }
}
</script>

Этовзломать еще я помещаю <Navigator /> компонент на каждой странице readme. Затем при загрузке страницы будет вызван метод setSideBar. Он использует утилиту (не показана), которая вычисляет массив элементов боковой панели на основе пути. Элементы помещаются в this.$myGlobalStuff.siteData.themeConfig.sidebar, и я убедился, что это установлено в console.log. Но боковая панель продолжает отображать предыдущий набор элементов. На более поздней странице навигации боковая панель обновляется, но это слишком поздно.

Я пытался (1) $ forceUpdate (), (2) выдать событие, которое, как мне кажется, прослушивает боковая панель, (3) сброс маршрута (последние две идеи - чистое отчаяние) и (4) я пробовал их в $ nextTick (). Ничто не получает боковую панель для обновления.

Вот стандартный компонент макета темы VuePress: https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/theme-default/layouts/Layout.vue

Вот вычисляемое свойство .. 

sidebarItems () {
  return resolveSidebarItems(
    this.$page,
    this.$page.regularPath,
    this.$site,
    this.$localePath
  )
},
...