Vue 路由知识三(过渡动画及路由钩子函数)

路由的过渡动画：让路由有过渡动画，需要在<router-view>标签的外部添加<transition>标签，标签还需要一个name属性。

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

css过渡类名：
组件过渡过程中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，比如name=”fade”,会有如下四个CSS类名：

fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
从上面四个类名可以看出，fade-enter-active和fade-leave-active在整个进入或离开过程中都有效，所以CSS的transition属性在这两个类下进行设置。

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

过渡模式mode：
in-out:新元素先进入过渡，完成之后当前元素过渡离开。
out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。

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

404页面的设置：
用户会经常输错页面，当用户输错页面时，我们希望给他一个友好的提示，为此美工都会设计一个漂亮的页面，这个页面就是我们常说的404页面。vue-router也为我们提供了这样的机制.

设置我们的路由配置文件（/src/router/index.js）：

{
　　path:'*',
　　component:Error
}
这里的path:’*’就是找不到页面时的配置，component是我们新建的一个Error.vue的文件。

2.新建404页面：

在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。

<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>

我们在用<router-link>乱写一个标签的路径。
<router-link to="

sss">我是乱写的路径</router-link> |

这样就已经实现404页面的效果。

路由中的钩子：（路由配置文件中的钩子函数）

{
      path:'/params/:newsId(\d+)/:newsTitle',
      component:Params,
      beforeEnter:(to,from,next)=>{
        console.log('我进入了params模板');
        console.log(to);
        console.log(from);
        next();//一定要写！！
},

三个参数：

1、to:路由将要跳转的路径信息，信息是包含在对像里边的。
2、from:路径跳转前的路径信息，也是一个对象的形式。
3、next:路由的控制参数，常用的有next(true)和next(false)。

（模板中的钩子函数）

beforeRouteEnter：在路由进入前的钩子函数。
beforeRouteLeave：在路由离开前的钩子函数。

<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'vue-router'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开路由模板");
    next();
  }
}
</script>

路由编程式导航:（在业务逻辑代码中需要跳转页面）

this.$router.go(-1) 和 this.$router.go(1) 前进和后退

this.$router.push('/目标地址')
这个编程式导航的作用就是跳转。