路由导航守卫

有 全局导航守卫 ，路由独享和 组件内的导航钩子 三种

router.beforeEach((to, from, next) => {
  // do someting
});
后置钩子（没有 next 参数）
router.afterEach((to, from) => {
  // do someting
});

cont router = new  VueRouter({
 routes: [
  {
    path: '/file',
    component: File,
    beforeEnter: (to, from ,next) => {  //路由独享
       // do someting
    }
   }
 ]
});

data(){
 return{
   pro:'产品'
 }
},
beforeRouteEnter:(to,from,next)=>{
  console.log(to)
  next(vm => {
   console.log(vm.pro)  //只能在回调里获取this ，上面两个可以正常获取this
  })
}

===============

params , query 参数传递并获取

 

//params传参 类似post请求  url不显示参数  localhost:8080/detail
this.$router.push({
 name:"detail",
 params:{
   name:'dongfang',
 }
});

//接受
this.$route.params.name


//query传参, 类似get请求，在url上显示参数    localhost:8080/detail?name=dongfang&id=34
this.$router.push({
  path:'/detail',
  query:{
    name:"dongfang",
    id:34
  }
 })

//接受 
this.$route.query.id

params 只能用 name 来引入路由，query 既可以用 name 又可以用 path（通常用 path）

 

来源：oschina

链接：https://my.oschina.net/u/560237/blog/3189521