在用vue-router路由处理一些需求的时候 例如 有时需要同时同级展示多个组件 而不是嵌套展示
例如：创建一个布局 有侧导航和主内容两个视图 此时命名视图就派上用场了
在路由对象中 使用
components属性 以使一个路径下可挂载多个子组件：之后即可为每个要展示的组件指定一个名字
默认name为default 即 不设置名字
<script>
var header={
template:"<h1>头部</h1>"
}
var leftBox={
template:"<h1>左侧边栏</h1>"
}
var mainBox={
template:"<h1>主体</h1>"
} // 创建路由对象
var router=new VueRouter({
routes:[
// 使用components属性 一个路径下挂载多个子组件
{path:"/",components:{
// 默认展示的组件
"default":header,
// 为组件命名
"left":leftBox,
"main":mainBox
}}
] })
var vm=new Vue({
el:'#app',
data:{},
methods:{},
// 挂载路由对象
router
});
</script>
然后 在页面中使用
<router-view>标签进行展示 在标签上指定name若指定了name 那么该
<router-view>只能放指定name的组件
<div id="app">
<!-- 不指定name 则使用默认(default)的组件 -->
<router-view></router-view>
<!-- 为<router-view>指定name 该<router-view>只能放指定name的组件 -->
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>ps：下面介绍下vue-router的原理
更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式,Hash模式和History模式：
（1）利用URL中的hash(“#”);
（2）利用History interface在HTML5中新增的方法;
1、Hash模式：
hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；
2、History模式：
HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL，就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面；
