app.vue

<template>
  <div id="app">
    <div>此框內(nèi)為app.vue中的內(nèi)容，不會因為點擊下面的router-link而消失</div>
    <router-link v-bind:to="'/hello'">say Hello</router-link>
    <router-link v-bind:to="'/world'">say World</router-link>
    <router-view/>
  </div>
</template>

rootApp.vue

<template>
  <div id="rootApp">
    <H3>此框內(nèi)為rootApp.vue中的內(nèi)容，點擊下面的router-link會消失</H3>
    <router-link v-bind:to="'/hello'">say Hello</router-link>
    <router-link v-bind:to="'/world'">say World</router-link>
    <router-view/>
  </div>
</template>

hello.vue

<template>
  <div>
    <h1>hello</h1>
  </div>
</template>

world.vue

<template>
  <div>
    <h1>world</h1>
  </div>
</template>

router的index.js

import Vue from 'vue'
import Router from 'vue-router'

import rootApp from '@/components/rootApp'
import hello from '@/components/hello'
import world from '@/components/world'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: rootApp
    },{
      path: '/hello',
      component: hello
    },{
      path: '/world',
      component: world
    }
  ]
})

結(jié)構(gòu)：

其實貼了這么多代碼只是想請教大家一個問題，為什么只能在app.vue里點擊router-link后會替換router-view，然后上面的內(nèi)容還不會消失。而在rootApp中也是和app.vue相差不多的結(jié)構(gòu)，點擊router-link，整個頁面都會被替換。想知道解決辦法