Условная навигация в app.vue в зависимости от состояния входа пользователя в main.js

Я хочу показать другую навигацию в app.vue в зависимости от того, подписан ли пользователь в или нет. я пришел к сложным решениям, нет ли простого решения if else или функции передачи из 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>

Почему вы храните loggedIn в глобальном Vue, а не в своем экземпляре data?

— 17.02.2019 18:25

Я тоже это сделал. App.vue не меняет навигацию. они не связаны, я думаю.. пытаюсь понять это

— 17.02.2019 18:35

vue.js

17.02.2019 18:16

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

686

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как правило, приложение должно использовать свои собственные элементы 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>

17.02.2019 20:04

Другие вопросы по теме

Как добавить Google AdSense в компонент Vue.js?

Почему это не работает, когда в vuelidate используется sameAs?

Параметр эмиттеров событий не определен для прослушивателя Vue js

Синхронизация объектов Vue с использованием компонента и ввода <Select>

Название Vue-head дважды

Могу ли я создать страницу входа с помощью HTML/CSS и javascript, а затем добавить к ней VUE?

Попытка получить доступ к объекту состояния в mount() в моем компоненте Vue

Изменение свойства объекта приводит к ошибке только для чтения

Как следует хранить сеансы пользователей при использовании Vue и Flask?

Уведомление Vue при изменении DOM компонента

Условная навигация в app.vue в зависимости от состояния входа пользователя в main.js

Ответы 1

Другие вопросы по теме

Похожие вопросы