router-view一定要写在app.vue中吗？

Question

app.vue

<template>
  <div id="app">
    <div>此框内为app.vue中的内容，不会因为点击下面的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>此框内为rootApp.vue中的内容，点击下面的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
    }
  ]
})

结构：

---

其实贴了这么多代码只是想请教大家一个问题，为什么只能在app.vue里点击router-link后会替换router-view，然后上面的内容还不会消失。而在rootApp中也是和app.vue相差不多的结构，点击router-link，整个页面都会被替换。想知道解决办法

Answer 1

app.vue是所有其他组件的父view/router，
router里的父子关系通过<router-view/>来展现。

Answer 2

这是因为vue-cli 在main.js里面实例化vue的时候 将template 设置为App.vue哦.

你可以改为rootApp.vue 然后不需要再定义路由!.