vue-router 2 nested named views BUT WILL DEEP LINKING WORK???

Example of nested named views

by Admiral Potato

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Nested Named Views</h1>
	<pre>{{ {path: $route.path, params: $route.params } }}</pre>
  <router-view></router-view>
</div>

CSS

.us {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header"
    "nav content"
    "nav helper"
    ;
}

h2 {
  grid-area: header;
}

.us__nav {
  grid-area: nav;
  border: 1px dotted;
  margin-right: .75rem;
  padding: .3rem;
}
.us__content {
  grid-area: content;
}
.us__content--helper {
  grid-area: helper;
}

Babel + JSX

const Home = {
	template: `
<div class="home">
	<h1>home</h1>
	<nav>	
		<router-link to="/settings/emails">/settings/emails</router-link>
		<br>
		<router-link to="/settings/profile">/settings/profile</router-link>
		<br>
		<router-link to="/goats/emails">/goats/emails</router-link>
		<br>
		<router-link to="/goats/profile">/goats/profile</router-link>
	</nav>
</div>
`
}

const UserSettingsNav = {
	template: `
<div class="us__nav">
  <router-link to="/">home</router-link>
  <br>
  <router-link :to="'/' + $route.params.name +'/emails'">emails</router-link>
  <br>
  <router-link :to="'/' + $route.params.name +'/profile'">profile</router-link>
</div>
`
}
const UserSettings = {
	template: `
<div class="us">
  <h2>User {{ $route.params.name }}</h2>
  <UserSettingsNav/>
  <router-view class ="us__content"/>
  <router-view name="helper" class="us__content us__content--helper"/>
</div>
  `,
  components: { UserSettingsNav }
}

const UserEmailsSubscriptions = {
	template: `
<div>
	<h3>Email Subscriptions</h3>
</div>
  `
}

const UserProfile = {
	template: `
<div>
	<h3>Edit your profile</h3>
</div>
  `
}

const UserProfilePreview = {
	template: `
<div>
	<h3>Preview of your profile</h3>
</div>
  `
}

const router = new VueRouter({
  //mode: 'history',
  routes: [
    { path: '/', component: Home},
		{ path: '/:name',
      // You could also have named views at tho top
      component: UserSettings,
      children: [{
      	path: 'emails',
        component: UserEmailsSubscriptions
      }, {
      	path: 'profile',
        components: {
        	default: UserProfile,
          helper: UserProfilePreview
        }
      }]
    }
  ]
})

// router.push('/settings/emails')

new Vue({
	router,
  el: '#app'
})