使用命名路由

https://jsfiddle.net/posva/6du90epg/

<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>Named Views</h1>

  <ul>

    <li>

      <router-link to="/">/</router-link>

    </li>

    <li>

      <router-link to="/other">/other</router-link>

    </li>

  </ul>

  <router-view class="view one"></router-view>

  <router-view class="view two" name="a"></router-view>

  <router-view class="view three" name="b"></router-view>

</div>

const Foo = { template: '<div>foo</div>' }

const Bar = { template: '<div>bar</div>' }

const Baz = { template: '<div>baz</div>' }

const router = new VueRouter({

  mode: 'history',

  routes: [

    { path: '/',

      // a single route can define multiple named components

      // which will be rendered into <router-view>s with corresponding names.

      components: {

        default: Foo,

        a: Bar,

        b: Baz

      }

    },

    {

      path: '/other',

      components: {

        default: Baz,

        a: Bar,

        b: Foo

      }

    }

  ]

})

new Vue({

	router,

  el: '#app'

})