vue路由实现多视图的单页应用

多视图的单页应用：在一个页面中实现多个页面不同切换，url也发生相应变化。

router-view结合this.$router.push("/pickUp")实现，效果如下：

当点击主目录时，下面内容框中无内容；当点击左侧菜单栏时，在内容框中显示相应内容，为对应的url。

<div>
    <div class="list-content" style="box-shadow: 2px 10px 18px #333333;" >

      <i-menu theme="dark" active-name="2"  :active-name="setActive"  :default-active="onRoutes" @on-select="routeTo">

        <Menu-item name="searchPeople">
          <Icon type="document-text"></Icon>
          第一个
        </Menu-item>
        <Menu-item name="identify">
          <Icon type="chatbubbles"></Icon>
          第二个
        </Menu-item>
        <Menu-item name="hisIdentify">
          <Icon type="chatbubbles"></Icon>
          第三个
        </Menu-item>
      </i-menu>
    </div>
    <div class="table-wrapper">
      <router-view></router-view>
      
    </div>
  </div>

在下面div中，加入了<router-view></router-view>，作用是将路由匹配到的组件渲染在这里，由于使用嵌套路由，所以在父组件中会将他名下的子组件匹配上，从来渲染。

使用this.$router.push(e)，在点击相应菜单时，由于已经匹配到子组件，会跳转到对应的组件页面，从而在<router-view></router-view>位置显示，即右侧内容框。

至此，实现了在同一页面进行多个不同页面之间的自由切换，即多视图单页应用。

2.

 在开始页面，通过<v-nav></v-nav>引入nav组件，需要导入该组件，且在compontents中加入。然后再在下面div中添加<router-view></router-view>，将该组件下的子组件渲染在这，即匹配到的组件渲染。

在nav组件中添加跳转，跳转到的页面都将显示在该组件的填写<router-view></router-view>处。此时，跟上面实现方式一样了。

index.js页面：

 结论：router-view控制匹配到的组件渲染/显示位置，this.$router.push(e)控制在该页面中点击，跳转。

这个vue项目地址：https://segmentfault.com/a/1190000009939997 

上面有该项目源码，自行下载。