vue-router路由参数的传递

使用vue开发也有一段时间了,
但是感觉对于vue的一些使用还是有点生疏,故特此记录一下, 防止自己的遗忘

首先在vue实例中,存在两个路由参数: 一个this.$router, this.$route

 console.log(this.$router, this.$route);

打印之后可以看到

• router:对应的是vuerouter的实例
• route :对应的所在组件的子路由(home)
  
  在VueRouter的 options 中包含了所有路由信息,常可以用在导航的时进行vfor循环,拿到对应信息(html 中直接使用$router.options遍历即可)
  
  组件路由实例中, 在 matched中可以得到导航的面包屑标签(.path)
  

路由参数的传递:

• 官网: 参数的传递
  除了传统的使用 路由传递, 还可以使用props 来进行解耦传递
  

• 路由的导航守卫:

• 全局守卫

beforeEach
beforeResolve
afterEach

• 局部守卫

beforeEnter

• 组件内守卫

beforeRouteEnter( 可以在此完成数据的获取 )与created, mounted类似
beforeRouteUpdate
beforeRouteLeave