Question

我想在app.vue中显示不同的导航，具体取决于用户是否已签名在或没有。我想到了复杂的解决方案，难道没有简单的解决方案或将函数从main.js传递到vue.js吗？预先感谢

#main.js
Vue.loggedIn=true

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

#App.vue

<template>
  <div id="app">
    <div v-if="Vue.loggedIn" id="nav">
      <router-link to="/about">About</router-link> | 
      <router-link to="/register">Register</router-link> | 
      <router-link to="/login">Login</router-link> |
      <router-link to="/profile">profile</router-link>
    </div>
    <div v-else id="nav">
      ...
      ..
    </div>
    <router-view/>
      </div>
</template>

Answer 1

通常，App应使用其自己的data项，因此，如果将loggedIn定义为一个，则应获得所需的行为。由于它是您的顶级模块，所以我不希望您将其作为道具传递，尽管那也可以。

const App = {
  data() {
    return {
      loggedIn: false
    };
  },
  template: '#app-template',
  mounted() {
    setTimeout(() => this.loggedIn = true, 2500);
  }
};

new Vue({
  render(h) {
    return h(App);
  }
}).$mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
</div>

<template id="app-template">
  <div id="nav">
    <template v-if="loggedIn">
      This is the logged in one
    </template>
    <template v-else>
      This is the not logged in one.
    </template>
  </div>
</template>

app.vue中的条件导航取决于用户从main.js登录的状态

1 个答案: