vue-cli学习-元信息和过场动效

路由元信息

可以给路由配置一个 meta 属性，这个属性一般设置对象即可，这个属性是固定的

    {
        path: '/about/:id',
        name: 'About',
        meta :{
            title : '关于'
        },
        component: () => import('../views/About.vue')
    },

router.beforeEach((to, from, next) => {
    if (to.meta.title !== undefined) {
        console.log(to.meta.title)
    }
    next()
})

过渡动效

过渡效果，字面意思就是基础 Vue 课程中的转场特效，支持路由切换
将视图组件标签使用包裹住

<transition name="fade">
    <router-view/>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.fade-leave-to{
  display: none;
}

也可以监听 watch 来判断对应的路由，给不同的路由使用不同的转场效果

    <transition v-bind:name="tName">
      <router-view/>
    </transition>


<script>
    export default {
      data(){
        return{
          tName:''
        }
      },
      watch:{
        '$route' (to,from){
          // console.log(to)
          // console.log(from)
          if (to.name === 'Home'){
            this.tName = 'fade'
          }else{
            this.tName = 'fade2'
          }
        }
      }
    }
</script>