Question

我是vue的新手，想知道是否可以在我的数据或计算部分中定义我的组件？

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <NavBar :items="['Home', 'Database', 'About']" />
    <ActiveComponent />
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'
import routes from './routes/index.js';

export default {
  name: 'app',
  components: {
    NavBar,
  },
  data: function() {
    return {
      activeLocation: window.location.pathname,
    }
  },
  computed: {
    ActiveComponent() {
      return routes[this.activeLocation] || routes.notFound
    }
  }
}
</script>

您明白我要做什么。我想使用<ActiveComponent />，但要根据所选的路线在计算部分中对其进行定义。

有没有办法做到这一点？

Answer 1

我非常认真地考虑，以至于我意识到不能在组件键中使用this，但是可以像这样使用全局变量

export default {
  name: 'app',
  components: {
    NavBar,
    ActiveComponent: routes[window.location.pathname.toLowerCase()] || routes.notFound
  }
}

在数据或计算截面vue上定义组件

1 个答案: