Vue-router学习笔记2 过度时动画效果

    <transition name="fade" mode="out-in">
        <router-view/>
    </transition>

name是必须属性。mode为过度效果的分层
mode:out-in 先退出，在进入
in-out 先进入，在退出

fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
简单的效果

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}

2.mode设置

histroy:当你使用 history 模式时，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！
hash:默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。

export default new Router({
  mode:'history/hash',
  routes: [
  ]
})

3.404页面设置

router.js

{
      path:'*',
      component:Error
    }

在设置一个Error组件引入就可以了

4.路由中的钩子函数

我们可以直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时：

{
      path:'/params/:newsId/:newsTitle',
      component:Params,
      beforeEnter:(to,form,next)=>{
        console.log(to)    //to返回一个对象，指的是去哪里
        console.log(form)  //form返回的是从哪来
        next()  //开关，必须要有
      }
    }

模板中设置钩子函数

  export default {
    data () {
      return {
        msg: 'params'
      }
    },
    beforeRouteEnter:(to,form,next)=>{
        console.log('准备进入路由')
        next()
    },
    beforeRouteLeave:(to,form,next)=>{
        console.log('准备离开路由')
        next()
    }
  }

5.编程式导航

App.vue

<div>
      <button @click="goBack">后退</button>
      <button @click="goTo">前进</button>
      <button @click="goHome">goHome</button>
    </div>

<script>
export default {
  name: 'App',
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    goTo(){
      this.$router.go(1)
    },
    goHome(){
      this.$router.push('/')
    }
  }
}
</script>