• 在App.vue新增兩個router-view，使用name屬性指定物件的頁面

<template>
  <div id="root">
    <div>
      <router-link to="/home">首頁 \</router-link>
      <router-link to="/news">新聞 \</router-link>
      <router-link to="/about">關於</router-link>
    </div>
    <router-view class="left" name="nav"></router-view>
    <router-view class="right" name="con"></router-view>
  </div>
</template>
 

• 在router.js指定路徑，在components新增：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Error from './views/Error.vue'
/* import About from './views/About.vue' */
import About1 from './views/About1.vue'
import About2 from './views/About2.vue'
import AboutNav from './views/AboutNav.vue'
import AboutCon from './views/AboutCon.vue'
/* import News from './views/News.vue' */
import NewsNav from './views/NewsNav.vue'
import NewsCon from './views/NewsCon.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: "/",
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/news',
      name: 'news',
      components: {
        nav:NewsNav,
        con:NewsCon
      }
    },
    {
      path: '/about',
      name: 'about',
      components: {
        nav:AboutNav,
        con:AboutCon
      },
      children:[
        {
          path: 'about1',
          component: About1
        },
        {
          path: 'about2',
          component: About2
        }
      ]
    },
    {
      path: '*',
      name: 'error',
      component: Error
    },
  ]
})