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

image.png

1

我们可以直接在路由配置文件（/src/router/index.js）中写钩子函数。但是在路由文件中我们只能写一个beforeEnter,就是在进入此路由配置时。先来看一段具体的代码：
{
     path:'/params/:newsId(\\d+)/:newsTitle',
     component:Params,
     beforeEnter:(to,from,next)=>{
       console.log('我进入了params模板');
       console.log(to);
       console.log(from);
       next();
},
三个参数：

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

2写在模板中的钩子函数

beforeRouteEnter：在路由进入前的钩子函数。
beforeRouteLeave：在路由离开前的钩子函数。
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("准备离开路由模板");
    next();
  }
}
</script>

2 404页面

1 router
{
  path:'*',
  component:Error
}
2 html
<template>
   <div>
       <h2>{{ msg }}</h2>
   </div>
</template>
<script>
export default {
 data () {
   return {
     msg: 'Error:404'
   }
 }
}
</script>

<router-link to="/bbbbbb">我是瞎写的</router-link> |

3编程式导航

<button @click="goback">后退</button>
<script>
export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    }
  }
}
</script>
router.go(1):代表着前进，用法和后退一样，我在这里就不重复码字了（码字辛苦希望大家理解）。

this.$router.push(‘/xxx ‘)

<button @click="goHome">回到首页</button>
export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    },
    goHome(){
      this.$router.push('/');
    }
  }
}

参考网址：http://jspang.com/2017/04/13/vue-router/#9