VueJS dwa widoki

Witam, robię aplikacje i pomyślałem to w taki sposób:

Już zrobiłem, routing, zabezpieczenie, że tylko po zalogowaniu itd, ale teraz zastanawiam się bo w tym dashboardzie te podlinki mają się wyświetlać w elemencie widoku dashboard:

czyli powinienem zastosować to: https://jsfiddle.net/posva/6du90epg/ ?
Czy tak to się robi w Vue?

Dałem child w routes.js

import Vue from 'vue';
import Router from 'vue-router';
import Welcome from './views/Welcome.vue';
import SignIn from './views/SignIn.vue';
import SignUp from './views/SignUp.vue';
import Dashboard from './views/Dashboard.vue';
import firebase from 'firebase';

import Account from './components/dashboard/Account.vue'

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '*',
      redirect: '/'
    },
    {
      path: '/',
      name: 'welcome',
      component: Welcome,
    },
    {
      path: '/signin',
      name: 'SignIn',
      component: SignIn,
    },
    {
      path: '/signup',
      name: 'SignUp',
      component: SignUp,
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true
      },
      children: [{
      	path: 'account',
        component: Account
      },]
    },
  ],
});

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if(requiresAuth && !currentUser) next('login');
  else if (!requiresAuth && currentUser) next('dashboard');
  else next();
})

export default router;

a mimo to nic się nie wyświetla w miejscu gdize jest nowy view

[...]
      <md-app-content>
        <router-view class="view two" name="dashboardView"/>
      </md-app-content>
[...]

Nikt nie wie jak używać podwójnych widoków?

Moim zdaniem nie ma wprost takiej opcji w Vue-Router.

Ja to robię tak, że mam osobne moduły zamiast jednego Twojego View1, np. DashboardModule, SetupModule etc, w których jest jakaś ogólna logika, a widok ładuje child route.
Powtórzeń kodu między modułami (typu sidebar) się nie boję, bo wszystko jest wydzielone do komponentów i mixinów.

Jeśli te przełączenia w widoku to jakieś pierdoły, które nie muszą generować zmiany w URL, to zwyczajnie je podmieniam na zasadzie zarządzania stanem i instrukcji v-if albo <component :is="activeComponent">. Tak zastępuję wtedy strategię z child routes.

@roSzi: właśnie na stacku też tak odpowiedzieli:
https://stackoverflow.com/questions/54057197/vue-router-nested-named-views-problem-additional-component-is-not-visible
w sensie, że nie można widok w widok.

Mógłbyś podać jakiś przykładowy kod bo nie wiem czy dobrze rozumuje.
I chciałbym mieć url-e więc v-if się nie sprawdzi chyba (chyba, że można zrobić v-if(url=="/settings/email/") i zmieniać urle

Sorki nie jestem przy kompie. Chciałem Tobie w takim wypadku zasugerować wydzielenie DashboardModule jako sciężki pierwszego poziomu, ale spróbuj tak - definiując ścieżki można podać ich propsy (paramsy). Spróbuj może zdefiniować kilka child routes dla Dashboard z różnymi url (/dashboard/notepad, /dashboard/costam), ale przypisać do nich inne wartości propsów. Poprzez te propsy mógłbyś sterować wyświetlaniem tych komponentów w ramach Dashboardu.

@roSzi: Nie używam jeszcze vuex więc to drugie to jest dobre rozwiązanie, tak spróbuje dzięki!

edit: jednak błąd pojawił się tuitaj

router.beforeEach((to, from, next) => {
  const currentUser = firebase.auth().currentUser;
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if(requiresAuth && !currentUser) next('login');
  else if (!requiresAuth && currentUser) next('dashboard');
  else next();
})

bez tego renderuje się poprawnie

edit:
wystarczyło dać next('dashboard:1'); i działa