vue视频教程系列第三十九节-多个router-view的应用

我们之前有学过单个router-view的应用，当我们输入不同的地址的时候，<router-view>里显示的是相对应页面的内容。这些只是单个区域的变化。

为什么要使用多个router-view

在我们实际的项目开发当中呢，经常会遇到多个区域的变化。我们拿“新闻”页面和“关于”页面举例来说，当我们输入”新闻”页面的地址时，左侧显示“新闻”页面的导航，右侧显示“新闻”页面的内容；当我们输入” 关于”页面的地址时，左侧显示“关于”页面的导航，右侧显示“关于”页面的内容。左侧和右侧的内容都不是固定不变的，都是变化的，这就需要用到多个router-view。

拿今日头条首页和新闻详情页来说，这两个页面的布局是一样的，但中间部分和右侧部分显示的内容是不一样的，会根据路由的不同显示不同的内容。

屏幕快照 2018-10-26 上午8.12.16.png 屏幕快照 2018-10-26 上午8.16.56.png

多个router-view的应用，肯定需要给他们命名的，如同我们人类，每个人都有自己的名字，以便识别。

使用多个router-view的步骤:

如果完成以上效果，我们首先需要创建News.vue，NewsNav.vue，NewsCon.vue，AboutNav.vue，AboutCon.vue这几个页面。

接下来需要在DOM里创建两个router-view，一个是左侧的导航，一个是右侧的内容，这两个变化的区域。他们都会随着路由的不同显示不同的内容。

<router-view class=”left”name=”nav”></router-view>
<router-view class=”right”name=”con”></router-view>

最后就是在router.js里进行配置:

首先需要将所有的页面引入进来
分别在about和news的路由中设置router-view显示的内容，以name来区分。拿about举例说明：

{
   Path: ‘/about’,
   Components: {
      Nav: AboutNav,
      Con: AboutCon
   }
}

这里要注意的一点是，因为我们现在需要定义两个router-view，会涉及到两个component，所以在设置时需要是复数—components。其key值就是DOM里设置的name属性值，value值呢，则是要放置的组件。

如果想看更多视频及教程，欢迎关注微信公众号：duzhan99