vue项目笔记（24）-小插曲（零碎知识点整理）-蒲公英云

vue项目笔记（24）-小插曲（零碎知识点整理）

知识点1：背景渐变设置

background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))

知识点2：子级元素水平垂直居中的样式（.container表示父级元素）

.container
    display flex
    flex-direction column
    justify-content center

知识点3：vue组建中的name通常是干什么用的？

（1）name可以用于递归组件。

// DetailList.vue组件
      <div v-if="item.children" class="item-children">
        <detail-list :list="item.children"></detail-list>
      </div>

（2）name可以用于取消组件的缓存。示例如下：

// App.vue组件
    <keep-alive exclude="Detail">
        <router-view/>
    </keep-alive>

（3）vue-devtools调试工具中显示的组件，即name。

知识点4：滚动行为

vue项目中，一个页面产生了滚动，而后跳转到另一个页面的时候，该页面也会和之前页面的滚动位置一样，很不方便。解决方法：在router/index.js中加入以下代码

export default new Router({
  routes: [{
    path: '/',
    name: 'Home',
    component: Home
  }, {
    path: '/city',
    name: 'City',
    component: City
  },{
    path: '/detail/:id',
    name: 'Detail',
    component: Detail
  }],
  // 滚动行为
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})