可以尝试一下如果子路由也写在外部routes的效果（当写在外部就会共用router-view标签）。关于模板需要注意的是，可以使用类似script这样的标签来包裹模板，然后根据id进行引用即可，另外，模板只能有一个根元素。关于模板标签的使用可以参考这篇文章：HTML5 template 标签元素简介
#命名视图组件目前我们都只是用了一个router-view标签，如果我们需要使用多个，那我们就需要对组件进行命名，否则无法找到要渲染的位置。注意，使用的是conponents而非component。
比如下面的例子：
<div> <!--对路由视图进行命名--> <router-view></router-view> <div> <router-view></router-view> <router-view></router-view> </div> </div> //1、创建路由视图组件 var header = {template: '<div>header</div>'}; var left = {template: '<div>left</div>'}; var main = {template: '<div>main</div>'}; //2、创建路由规则 var routes = [ {path: 'http://www.likecs.com/', components: { default: header, left: left, main: main }//命名视图组件 }]; //3、创建一个路由实例 var router = new VueRouter({ routes: routes }); //4、将路由搭载到Vue实例中 new Vue({ el: '#app', router: router });再添加一下样式：
body{ margin: 0px; padding: 0px; } .header{ background-color: #6aa4d2; height: 100px; } .left{ background-color: #999ddd; flex: 2; } .main{ background-color: #b6b985; flex: 8; }就可以看到以下布局效果：
