使用嵌套路由来优化Vue单页应用

作者: Lynan 分类: Vue.js 发布时间: 2018-05-08 16:21

相信不少的buddies都是从一个列表页,一个详情页开始学Vue的,(没有错我说的就是知乎日报。)
哈哈哈哈哈哈

目的效果

进入详情页面能够保存列表的滚动高度,返回时列表不会重新刷新。(如应对列表内容更新的情况,我们可以做一个下拉刷新。)

请仔细观察页面的滚动条位置,在进入详情页面以后没有变化。根本的原因是这个列表页根本没有刷新(没有被销毁重新渲染)。
关于嵌套路由的具体介绍,请阅读官方文档
使用嵌套路由以后,子路由的内容会渲染在父级路由页面的router-view当中。
请看我的父级页面的代码:

 

routes.js

path:'/articleList',
name: 'article-list',
component: articleList,
children: [
  {
    path: 'detail',
    name: 'article-detail',
    component: articleDetail
  }

 

其中,这个child-view是我自定义的用于包裹子路由的组件,为它定一了百分百宽高以及白色背景,绝对定位在父级页面的上方,确保能覆盖父级页面。
child-view的参考代码:

<template>
  <div class="child-view">
    <slot />
  </div>
</template>
<script>
export default {
  props: {
    level: {
      type: Number,
      default: 2  //用于特殊情况,可以传递level参数设置child-view的z-index
    }
  }
}
</script>

<style>
.child-view {
  width: 100%;
  height: 100%;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

 

在使用child-view之前,可以将它注册为全局的组件,也可局部引入,根据个人喜好进行。

//在main.js中引入
import Vue from 'vue'
import childView from '@/components/common/childViewWrapper'

Vue.component('child-view', childView)

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注