Question

我需要包含“学生”，“教师”，“管理员”的VuePress导航栏，以根据所选用户类型更改侧栏项目。

以下内容很接近，但不太有效。我可以看到配置已更新，但是React系统看不到更改。并且之所以很清楚，是因为默认主题的SideBar组件如何计算侧栏项目（请参见下面的代码）。该计算使用具有四个属性的函数。其中之一是具有嵌套属性themeConfig的$ site，该属性具有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 />组件。然后，在加载页面时，将调用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
  )
},

Vuepress侧栏可根据导航项进行更改

0 个答案: