How can I render another container with a router-view given a specific route value?

Question

Vue.js

There is a main App.vue:

<template>
  <div>
        <!-- begin:: Page -->
        <div class="m-grid m-grid--hor m-grid--root m-page">
          <headernav></headernav>
          <layout></layout>
          <!-- main Section -->


          <!-- begin::Footer -->
          <footer class="m-grid__item m-footer ">
              <div class="m-container m-container--fluid m-container--full-height m-page__container">
                  <div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
                      <div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
                          <span class="m-footer__copyright">
                                  2018 &copy; Bitbd.ru
                              </span>
                      </div>
                      <div class="m-stack__item m-stack__item--right m-stack__item--middle m-stack__item--first">
                          <ul class="m-footer__nav m-nav m-nav--inline m--pull-right">
                              <li class="m-nav__item">
                                  <a href="/about" class="m-nav__link"><span class="m-nav__link-text">О сервисе</span></a>
                              </li>
                              <li class="m-nav__item m-nav__item">
                                  <a href="#" class="m-nav__link" data-toggle="m-tooltip" title="Support Center" data-placement="left"><i class="m-nav__link-icon flaticon-technology-1 m--icon-font-size-lg3"></i></a>
                              </li>
                          </ul>
                      </div>
                  </div>
              </div>
          </footer>
          <!-- end::Footer -->

        </div>
        <!-- end:: Page -->

        <!-- begin::Scroll Top -->
        <div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
            <i class="la la-arrow-up"></i>
        </div>
        <!-- end::Scroll Top -->
  </div>
</template>
<script>
import Headernav from './components/Headernav.vue';
import Layout from './components/Layout.vue';
export default {
  components : {
    'headernav': Headernav,
    'layout':Layout,
  },
}
</script>

In the most already registered . I have two components Registration.vue and Login.vue, which have their own unique pages, when components are usually connected, their template will be inserted into the main App.vue, that is, in fact, a whole page is added to the container on the site, with its own design . Where can I read or how can I make Registration.vue and Login.vue into completely independent components so that when I visit site.ru/registration, I have a purely Registration.vue component, and not substituted into the main application container? <layout><router-view><router-view><route-view>

Answer 1

new Vue({
  router,
  components: {
    App,
    Register,
    Login
  },
  render(h) {
    return h(
      this.$route.path === '/register' ? 'Register' : this.$route.path === '/login' ? 'Login' : 'App'
    )
  }
}).mount('#app')