技术要点

Vue
vue-router
html / css

开始

首先定义一个初始的界面，如下所示：

HelloWorld.vue：

在这个界面中我们点击foo就可以将router-view切换为我们定义的另一个组件。

<template>
  <div class="hello">
    <router-link to="/foo">foo</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

foo.vue

这个就是要显示出来的组件

<template>
<div id="foo">
  嵌套路由
</div>
</template>

<script>
export default{
  name: 'foo'
}
</script>

路由

如下这样定义，在使用浏览器访问时默认是访问HelloWorld组件的，而点击了组件内的foo后也会将foo组件显示出来。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import foo from '@/components/foo'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/:id',
      component: HelloWorld,
      children: [
        {path: '/foo',component: foo}
      ]
    }
  ]
})