Vue 路由生命周期

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import params from '@/components/params'
import Hi1 from '@/components/Hi1'
import Error from '@/components/Error'



Vue.use(Router)

export default new Router({
  //路径不加#号
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    },{
      path:'/params/:newsId/:newsTitle',
      component:params,
      // //钩子函数
      // beforeEnter:(to,from,next)=>{
      //   console.log(to);
      //   console.log(from);
      //   //next拦截跳转 true false,修改跳转,可以写ifelse
      //   next({
      //     path:'/'
      //   });
      // }
    },{
      path:'/goHome',
      redirect:'/'
    },{
      path:'/goParams/:newsId/:newsTitle',
      redirect:'/Params/:newsId/:newsTitle'
    },{
      path:'/hi1',
      component:Hi1,
      alias:'/jspang'
    }
    //当输入错误显示404
    ,{
      path:'*',
      component:Error
    }
  ]
})

<template>
    <div>
       <h2>{{ msg }}</h2>
       <p>newsId:{{$route.params.newsId}}</p>
       <p>newstitle:{{$route.params.newsTitle}}</p>

    </div>
</template>
<script>
   export default {
    data () {
      return {
        msg: 'Hi, I am Hi1!'
      }
    },
    //一定要加next. 相当于按钮开关
    beforeRouteEnter:(to,from,next)=>{
        console.log("准备进入路由模板");
        next();
    },
    beforeRouteLeave: (to, from, next) => {
        console.log("准备离开路由模板");
        next();
    }
  }
</script>