全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

vue-router有哪些方法

发布时间:2022-09-23 17:56:03
发布人:qyf

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对象

  })

  })

相关文章

kd-tree和ball-tree在算法实现原理上有什么区别?

kd-tree和ball-tree在算法实现原理上有什么区别?

2023-10-15
nn.Linear()和nn.Embedding()有什么区别?

nn.Linear()和nn.Embedding()有什么区别?

2023-10-14
敏捷开发和迭代式开发的根本区别是什么?

敏捷开发和迭代式开发的根本区别是什么?

2023-10-14
flutter和uni-app在应用层面有什么区别?

flutter和uni-app在应用层面有什么区别?

2023-10-14

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取