Как можно вывести другой контейнер с router-view при определенном значении роута?

Question

[Алексей Скляров]

Есть основной 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>

В самом <layout> уже прописан <router-view>. У меня есть два компонента Registration.vue и Login.vue, которые имеют свои уникальные страницы, при обычно подключении компонентов, их шаблон будет вставляться в <router-view> основного App.vue, то есть по сути в контейнер на сайте добавляется еще целая страница, со своим дизайном. Где можно почитать или как можно вынести Registration.vue и Login.vue в абсолютно самостоятельные компоненты так, чтобы при посещении site.ru/registration, у меня показывался чисто компонент Registration.vue, а не подставлялся в <route-view> контейнер основного приложения?

Answer 1

[alex]

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