多视图的单页应用:在一个页面中实现多个页面不同切换,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
上面有该项目源码,自行下载。