In Vuejs, how to render a component outside of the default router-view

user_3688354 0
Viewed 2558

I have a vue app where the pages are navigated using vue-router.

My app.vue is simple:

<template>
  <div id="app">
    <main-header/>
    <router-view/>
  </div>
</template>

<script>...</script>
<style>...</style>

The pages are rendered using vue-router:

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/page1',
      name: 'Page1',
      component: Page1
    }, {
      path: '/page2',
      name: 'Page2',
      component: Page2
    }
  ]
})

The urls for using app is now

localhost:8080/#/      -> Home
localhost:8080/#/page1 -> Page1
localhost:8080/#/page2 -> Page2

Problem: I want to make another page Login.vue that is not being used by vue-router and is accessed like this: localhost:8080/ or localhost:8080/login and after successful authentication it goes back to default url routing as described above. When going to localhost:8080/login for example there is no App.vue rendered, is that possible?

How do I do this?

vue-router vuejs2 vue-component vue.js
1 Answers

I'm not sure if this is what you're trying to achieve, but this is how I did it using router for Login page by using v-if on my sections components in the main component template like this:

<template>
    <body class="my-theme">
      <div class="wrapper">
          <app-header v-if="authenticated"></app-header>
          <main-sidebar v-if="authenticated"></main-sidebar>
          <router-view></router-view>
          <app-footer v-if="authenticated"></app-footer>
      </div>
  </body>
</template>

<script>

  import AppHeader from './components/sections/AppHeader'
  import AppFooter from './components/sections/AppFooter'
  import MainSidebar from './components/sections/MainSidebar'

export default {
  name: 'app',
  props: {
      authenticated: {
        type: Boolean,
        required: true
      }
  },
  components: {
    AppHeader,
    AppFooter,
    MainSidebar
  }
}
</script>
user_53537340
Related