Vue

by darkylmnx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<div id="app">
  <h1>app</h1>
  <p>text</p>
    <component v-for="(one, i) in stack" :key="i" :is="one" v-show="i === stack.length - 1"></component>
</div>

<script id="home" type="text/x-template">
  <div>
    <h2>hello</h2>
    <router-link to="/">kikoo</router-link>
    <router-link to="/about">about</router-link>
  </div>
</script>

<script id="about" type="text/x-template">
  <div>
    <h2>about</h2>
    <router-link to="/about">AAAA</router-link>
    <router-link to="/">BBBB</router-link>
    <router-link to="/about/2">ONE</router-link>
    <keep-alive><router-view></router-view></keep-alive>
  </div>
</script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

const router = new VueRouter({
  routes: [
  	{
    	name: 'home',
      path: '/',
      component: {
      	template: '#home',
        created() {
        	console.log('home')
        }
      }
    },
    {
    	name: 'about',
      path: '/about',
      component: {
      	template: '#about',
        created() {
        	console.log('about')
        }
      },
      children: [
      	{
        	name: 'about.one',
          path: '',
          component: {
      			template: '<p> one </p>',
            created() {
        	console.log('about 1')
        }
      		}
        },
        {
        	name: 'about.two',
          path: '2',
          component: {
      			template: '<p> two </p>',
            created() {
        	console.log('about 2')
        }
      		}
        }
      ]
    }
  ]
})

router.beforeEach((to, from, next) => {
	//console.log(to)
  next()
})

router.afterEach(to => {
  stack.push(to.matched[0].components.default)
  console.log(stack)
})

const stack = []

new Vue({
  el: "#app",
  router,
  data: {
  	stack
  },
  methods: {
  }
})