在用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 跳转而无须重新加载页面；
通常情况下，我们会选择使用History模式，原因就是Hash模式下URL带着‘#'会显得不美观；但实际上，这样选择一不小心也会出问题；比如：
但当用户直接在用户栏输入地址并带有参数时：
Hash模式：xxx.com/#/id=5 请求地址为 xxx.com,没有问题;
History模式: xxx.com/id=5 请求地址为 xxx.com/id=5，如果后端没有对应的路由处理，就会返回404错误；
为解决这一问题，vue-router提供的方法是：
在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。
给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果你使用 Node.js 服务器，你可以用服务端路由匹配到来的 URL，并在没有匹配到路由的时候返回 404，以实现回退。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com