千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > vue-router有哪些方法

vue-router有哪些方法

来源:千锋教育
发布人:qyf
时间: 2022-09-23 17:56:03 1663926963

vue-router有哪些方法

  1. router.beforeEach 路由守卫

  我们可以使用这个方法,按需拦截用户访问某些敏感路由,例如:

  router.beforeEach((to,from,next)=>{ //路由的全局前置守卫

  if(to.path.indexOf('/account')==-1){ //判断用户访问的是不是个人中心

  next() //不是个人中心,直接放行

  }else{

  if(store.state.my.userInfo){ //判断登录状态

  next() //如果已经登录,直接放行

  }else{

  next('/login') //如果没有登录,则跳至登录页

  }

  }

  })

  2. router.push 编程式导航

  通过编程式导航,我们可以通过事件的方式触发路由跳转

  // 字符串

  router.push('home')

  // 对象

  router.push({ path: 'home' })

  // 命名的路由

  router.push({ name: 'user', params: { userId: 123 }})

  // 带查询参数,变成 /register?plan=private

  router.push({ path: 'register', query: { plan: 'private' }})

  3. router.go、router.back、router.forward 路由的进入与返回

  router.go 作用等同于window.history.go

  // 在浏览器记录中前进一步,等同于 history.forward()

  router.go(1)

  // 后退一步记录,等同于 history.back()

  router.go(-1)

  // 前进 3 步记录

  router.go(3)

  4. router.addRoute 动态设置路由映射

  添加一条新路由规则。如果该路由规则有 name,并且已经存在一个与之相同的名字,则会覆盖它。

  axios.get('/login',(result)=>{ //通过异步接口获取对应用户的特有路由配置

  let {routerList} = result

  routerList.forEach((item) => {

  this.$router.addRoute(item) //通过addRoute方法依次将路由配置设置给router对象

  })

  })

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT