VUE——路由活用(vue-router)

本文介绍了Vue路由的实用技巧,包括如何配置scrollBehavior实现页面滚动位置还原,利用全局前置守卫处理特定路由情况,使用组件内的beforeRouteEnter和beforeRouteUpdate控制守卫更新数据,以及通过watch监听路由变化实现与原生后退效果一致的行为。适用于Vue项目中增强路由管理和交互体验。
摘要由CSDN通过智能技术生成

首先检查是否安装了路由依赖,若没有安装,先进行安装:

cnpm install vue-router -D

具体路由定义或基本使用请参考官方文档:点击打开链接

1.当页面内容过多时,切换路由始终回到页面顶端,配置scrollBehavior

const router = new Router({
  scrollBehavior: () => ({
    y: 0
  }),
  routes
});

2.通过全局前置守卫来判断路由,当当前要去的路由没找到,或者为指定的某个时 做相应操作

router.beforeEach((to, from, next) => {
  if (to.path == "/comingSoon") {
    Toast("敬请期待!");
  } else {
    next();
  }
});
注:
    to:即将要跳转的路由
    from:当前离开的路由

    next()一定要写,否则路由不会跳转,至于next具体参数,请参照参考手册

3.组件内的控制守卫

3.1 beforeRout

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值