0

我在 vuex + vue-router + 动态组件的帮助下显示网站的页眉和页脚。我通过 vuex 从 vue-router 获取当前路由并将数据“注入”到 App.vue 中，其中有我的页眉和页脚。我可以控制台记录每个页面的正确路线。

app.vue 标记如下所示：

<component :is="selectedHeader"></component>
   <router-view></router-view>
<component :is="selectedFooter"></component>

现在我使用计算属性 selectedFooter 和 selectedHeader 来显示正确的组件：

  computed: {
    
    // eslint-disable-next-line vue/return-in-computed-property
    selectedHeader() {    
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.currentRoute = this.$store.getters.getRoute
     
      if(this.currentRoute) {

      if(this.currentRoute.includes("de")) {          
          return "de-header";     
      }

      if(this.currentRoute.includes("en")) {
          return "en-header";
      }

      if(this.currentRoute.includes("es")) {          
          return "es-header";     
      }

      
    }},

    // eslint-disable-next-line vue/return-in-computed-property
    selectedFooter() {
         // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.currentRoute = this.$store.getters.getRoute
     
      if(this.currentRoute) {

       if(this.currentRoute.includes("de")) {          
          return "de-footer";     
      }  

      if(this.currentRoute.includes("en")) {
          return "en-footer";
      }

      else if(this.currentRoute.includes("es")) {          
          return "es-footer";     
      }
     
    }},

它基本上可以工作，但我认为我已经遇到了副作用，因为我没有正确使用计算属性，例如，一条路线显示到错误的语言标题，即使来自商店的路线数据绝对正确？

我想使用观察者会更好，但是如何？

4

0 回答 0