CODEWITHSUNDEEP
vue.jsvue-router
Mehmet Ali
Mehmet Ali

Reputation: 363

How to render two components in the same path according to Vuex?

I have an application that have three simple views like following:

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

After registration done a back-end server returns token and I store it to window.localStorage. I want to show "Homepage" when there is no token in the browser, if so "Logged" page should be displayed. I also want them to have same path: "/"

How to achieve this?

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
            })

Upvotes: 0

Views: 462

Answers (1)

onuriltan
onuriltan

Reputation: 3908

You can handle this situation by;

  1. Defining two components named Homepage and Logged and importing them inside a one view named Index
  2. Inside Index View, put Logged and Homepage component to template and make a v-if to decide to use Logged or Homepage component like;

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
        }
    ]
});

Upvotes: 2

Related Questions