Как сделать два компонента в одном и том же пути в соответствии с Vuex? - PullRequest
Новая
       2

Как сделать два компонента в одном и том же пути в соответствии с Vuex?

0 голосов
/ 30 июня 2019

У меня есть приложение, которое имеет три простых представления, таких как: 

Homepage - Simple page with information texts
Register - Asks for e-mail and passwords and register users
Logged - When registration done, this page displays buyable items

После завершения регистрации внутренний сервер возвращает токен, и я сохраняю его в window.localStorage.Я хочу показать "Домашнюю страницу", когда в браузере нет токена, если это так, должна отображаться страница "Зарегистрированные".Я также хочу, чтобы у них был такой же путь: "/"

Как этого добиться?

router.js 

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/",
            get component() {
                // This code works but when this.$router.push("/") executed from Register, Home is rendered unless page is refreshed
                if(typeof Store.getters.token === "undefined") return Home;
                return Logged;
            },
        },
        {
            path: "/register",
            component: Register
        }
    ]
});

register.vue 

            this.$http.post("register", {
                email: this.email,
                password: this.password
            })
            .then(response => {
                this.$store.commit("setToken", response.data.token);
                this.$router.push("/"); // Homepage is rendered unless page is refreshed
            })

1 Ответ

2 голосов
/ 30 июня 2019

Вы можете справиться с этой ситуацией с помощью

  1. Определение двух компонентов с именем Домашняя страница и Записано и импорт их в одно представление с именем Индекс
  2. В индексном представлении поместите компонент Logged и Homepage в шаблон и сделайте v-if , чтобы принять решение использовать компонент Logged или Homepage, как;

Index.vue 

<template>
  <Homepage v-if="typeof $store.getters.token === 'undefined'"/>
  <Logged v-else />
</template>
<script>
   import Logged from '../components/Logged'
   import Homepage from '../components/Homepage'
      export default {
        components: {
         Logged,
         Homepage
      },
    }
</script>

router.js 

const Index = () => import('./views/Index.vue');
const Register = () => import('./views/Register.vue');

const router = new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/",
            component: Index
        },
        {
            path: "/register",
            component: Register
        }
    ]
});
...