VueRouter笔记

VueRouter笔记

基于代码方式实现跳转(编程式跳转)

1. 路由跳转三种写法
   1. <router-link to='/home'>
   2. <router-link :to='{path:'/home'}'>
   3. <router-link :to='{name:'home'}'>
2. <button @click='goto'>
   1. goto(){this.$router.push('/vfor')}
   1. push改为replace,没有历史记录,回退不起作用
   1. push跳转,replace替换,go(-1)回退
3. this.$router获取当前项目中的路由管理器(VueRouter对象),该路由管理器对象包含了已经配置好的所有的路由器对象,每一个路由对象中包含:Path,name,component属性,还提供一些方法用于操作路由跳转
4. $router提供了路由管理器所拥有的的属性和方法,页面跳转等功能,$route封装当前路由的属性:name,path,component,query,params等属性

路由跳转中的参数传递问题

1. 传递参数
   1. 查询字符串
   1. 使用?在路径后进行查询字符串拼接
   1. <router-link to='/detail?id=123'>或this.$router.push('/detail?id=123')
   2. 路径
   1. 将参数藏在请求资源路径后进行参数传递
   1. 配置路由path:'/home/:id'
   1. <router-link to='/detail/123'>或this.$router.push('/detail/123')
2. 接收参数
   1. 查询字符串
   1. let id=this.$route.query.id
   1. this.$route可以获取当前组件所对应的路由对象(相当于index.js中定义的一段配置:path,name,component等)2.路径1.‘$route.params.id`
   1. index.js中path配置/detail/:id用于匹配请求路径,把最后斜杠后的字符串当做路径参数赋值给id,在detail.vue可以获取该id参数

路由的嵌套

{
  path:'/components',
  name:'components',
  component:()=>import('../views/Components.vue'),
  children:[
    {
      path:'form',
      component:()=>import('../views/Form.vue')
    }
  ]
}

路由的重定向

1. {
     path:'/components',
     redirect:'/components/table'
   }
   

2. 当访问/components时,会自动定位到/components/table

在路由上绑定信息

1. {
     path:'/components',
     name:'components',
     component:()=>import('../views/Components.vue'),
     meta:{
       crumb:['电影管理','电影列表','修改电影']
     }
   }
   

2. meta是自定义的

3. 使用信息使用$route.meta.crumb

全局路由守卫

1. 路由守卫在路由跳转的时候执行,进行判断,不符合条件的,强制跳转到登录页面,符合才能准确跳转目标路由