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

admin管理员组

文章数量:1022834

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",
  ponents: {
    TopNav,
    SideBar,
    Footer
  }
};
</script>

Router.js

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

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

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      title: 'Login Page',
      path: '/back/login',
      name: 'login',
      ponent : Login
    },
    {
      title: 'Dashboard',
      path: '/',
      name: 'dashboard',
      ponent: Dashboard
    },
    {
      path: '/post',
      name: 'post',
      ponent: 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) ponent 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 ponent, huh ?

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

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",
  ponents: {
    TopNav,
    SideBar,
    Footer
  }
};
</script>

Router.js

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

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

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      title: 'Login Page',
      path: '/back/login',
      name: 'login',
      ponent : Login
    },
    {
      title: 'Dashboard',
      path: '/',
      name: 'dashboard',
      ponent: Dashboard
    },
    {
      path: '/post',
      name: 'post',
      ponent: 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) ponent 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 ponent, huh ?

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

• javascript
• laravel
• vue.js
• single-page-application

Share Improve this question Follow asked Jun 4, 2020 at 3:31 PPTPPT 7111 silver badge99 bronze badges 1

• have you try to make a route with MainApp? – hhh Commented Jun 4, 2020 at 4:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

One way to handle this is to have an intermediary page ponent 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',
      ponent : Login
    },
    {
      path: '',
      ponent: LoggedInLayout,
      children: [
        {
          title: 'Dashboard',
          path: '/',
          name: 'dashboard',
          ponent: Dashboard
        },
        {
          path: '/post',
          name: 'post',
          ponent: Post
        },
      ]
    }
  ]
});

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

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 ponent 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./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.

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",
  ponents: {
    TopNav,
    SideBar,
    Footer
  }
};
</script>

Router.js

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

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

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      title: 'Login Page',
      path: '/back/login',
      name: 'login',
      ponent : Login
    },
    {
      title: 'Dashboard',
      path: '/',
      name: 'dashboard',
      ponent: Dashboard
    },
    {
      path: '/post',
      name: 'post',
      ponent: 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) ponent 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 ponent, huh ?

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

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",
  ponents: {
    TopNav,
    SideBar,
    Footer
  }
};
</script>

Router.js

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

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

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      title: 'Login Page',
      path: '/back/login',
      name: 'login',
      ponent : Login
    },
    {
      title: 'Dashboard',
      path: '/',
      name: 'dashboard',
      ponent: Dashboard
    },
    {
      path: '/post',
      name: 'post',
      ponent: 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) ponent 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 ponent, huh ?

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

• javascript
• laravel
• vue.js
• single-page-application

Share Improve this question Follow asked Jun 4, 2020 at 3:31 PPTPPT 7111 silver badge99 bronze badges 1

• have you try to make a route with MainApp? – hhh Commented Jun 4, 2020 at 4:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

One way to handle this is to have an intermediary page ponent 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',
      ponent : Login
    },
    {
      path: '',
      ponent: LoggedInLayout,
      children: [
        {
          title: 'Dashboard',
          path: '/',
          name: 'dashboard',
          ponent: Dashboard
        },
        {
          path: '/post',
          name: 'post',
          ponent: Post
        },
      ]
    }
  ]
});

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

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 ponent 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./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.

本文标签： javascriptthe best way to split view between login page and dashboard Routing Vue js for SPAStack Overflow