VUE——路由活用（vue-router）_vue 路由是活的-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36111804/article/details/81017810

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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 beforeRouteEnter:当前组件路由加载前，比如呀通过判断路由里面的参数，对组件里的某个数据进行更改

beforeRouteEnter: (to, from, next) => {
    let vm = this;
    let source = from.params.source;
    if (source == type.GOOUTDETAIL || source == type.ADDGOOUT) {
      next(vm => {
        vm.tabIndex = 1;
      });
    } else {
      next();
    }
  }

注：

to,from跟全局守卫的意义一样，

next可以接受当前vue实例作为参数，用来更改实例里的数据。同理next()必须写

3.2 beforeRouteUpdate: 当组件复用时，比如："home/id=001" ——> "home/id=002",此时会触发此守卫

beforeRouteUpdate: (to, from, next) => {
    console.log(to);
    console.log(from);
    console.log(this.title);
    next();
  }

注：
next()必须写
next()里面不允许带参数

回调里面可以直接通过this使用当前组件实例

4.通过watch对路由进行监控，可以再组件中进行监控，也可以在根组件下进行监控

在H5与webview的混合开发中，常常要保证router的后退效果，与原生的后退效果一致。在一个树结构中，点击某一项进入第2层，再点击进去第3层，返回的时候，分别返回到上一层，以"home"为例，可以有"home/id=001" ——> "home/id=002"——>"/home/id=006"，根据参数动态显示数据，此时对路由监控即可解决：

watch: {
    $route() {
      if (this.$route.query.id == undefined) {
        this.persons = this.allPerson;
      } else {
        let id = this.$route.query.id;
        this.persons = getCurrentPart(id, this.allPerson);
      }
    }
  },