the best way to split view between login page and dashboard Routing Vue js for SPA

user_11728046 0
Viewed 2267

i've got problem when iry to split view between login page and dashboard, here's my code

MainApp.vue

<template>
  <div class="main-wrapper">
    <div class="navbar-bg"></div>
    <TopNav />
    <SideBar />
    <div class="main-content">
      <router-view></router-view>
    </div>
    <Footer />
  </div>
</template>

<script>
import TopNav from "./partials/TopNav";
import SideBar from "./partials/SideBar";
import Footer from "./partials/Footer";
export default {
  name: "MainApp",
  components: {
    TopNav,
    SideBar,
    Footer
  }
};
</script>

Router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import Dashboard from '../components/Dashboard';
import Post from '../components/Post';
import Login from '../view/Login';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      title: 'Login Page',
      path: '/back/login',
      name: 'login',
      component : Login
    },
    {
      title: 'Dashboard',
      path: '/',
      name: 'dashboard',
      component: Dashboard
    },
    {
      path: '/post',
      name: 'post',
      component: Post
    },
  ]
});

export default router;

app.js

import Vue from 'vue';
import Vuex from 'vuex';
import Router from './router'
import MainApp from './layouts/MainApp.vue'

Vue.use(Vuex);

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

from these codes above, everytime i go to '/back/login' route, the login page always appear with dashboard(sidebar, topnav and footer) component and yeah i know why it happen, because it's always rendering MainApp.vue. since this is my first time making SPA app with vuejs, i still don't know what's the best way to doing this(if not SPA, it will be easy to solve this), so i tried something silly here, i added some condition like this 

new Vue({
        router: Router,
        render: $route.name ? !== 'login' ? h => h(MainApp) : h => h(login)
    }).$mount('#app');

and it gave me error "this $route is not defined", i guess it's only worked inside the component, huh ?

so i want to ask the best way to split view between login page and dashboard page

single-page-application laravel vue.js javascript
1 Answers

One way to handle this is to have an intermediary page component that just contains the layout you want, with your other routes nested below it.

Your routes could look like:

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      title: 'Login Page',
      path: '/back/login',
      name: 'login',
      component : Login
    },
    {
      path: '',
      component: LoggedInLayout,
      children: [
        {
          title: 'Dashboard',
          path: '/',
          name: 'dashboard',
          component: Dashboard
        },
        {
          path: '/post',
          name: 'post',
          component: Post
        },
      ]
    }
  ]
});

And then your LoggedInLayout component would contain all the elements of what's currently in your MainApp component

LoggedInLayout.vue

<template>
  <div class="main-wrapper">
    <div class="navbar-bg"></div>
    <TopNav />
    <SideBar />
    <div class="main-content">
      <router-view></router-view>
    </div>
    <Footer />
  </div>
</template>

...and your MainApp component would literally just be a router-view:

MainApp.vue

<template>
  <router-view></router-view>
</template>

Note that the LoggedInLayout entry in your routes file has an empty string for a path. That means it doesn't add anything to the route. Post is still accessible at yourapp.com/post.

It also doesn't have a name because you don't actually ever want to navigate solely to the LoggedInLayout. It's always there in service of other pages.

user_42192090
Related