vue2升级vue3：vue router使用需要注意的事项随笔

首先关于Composition API与选项式API区别，比如：

this.$route 和 this.$router  会用 useRoute 和 useRouter 这两个新的 composition 函数来替代。而且可以在 可以在 setup 函数内直接定义路由守卫，如 onBeforeRouteLeave 或 onBeforeRouteUpdate。

import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
import { ref, watch } from 'vue';

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();

    // 访问路由参数:
    const id = ref(route.params.id);

    // 监听路由变化:
    watch(() => route.params, (newParams) => {
      // 响应路由参数的变化
    });

    // 导航到不同的路由
    router.push({ name: 'otherRoute' });
    // 比如
    onBeforeRouteUpdate((to, from, next) => {
      // 这里
    });
    // 路由离开，做校验。比如表单数据未保存，提示用户是否离开
    onBeforeRouteLeave((to, from, next) => {

    });
  }
}

关于这方面，其是没有啥好讲的。看看文档，都能明白。

watch(() => route.params  与onBeforeRouteUpdate((to, from, next)

对于新手，一般会直接监听 route.params 来搞定一切，而忽视onBeforeRouteUpdate。或者反之

在 Vue.js 中监听路由变化，选择 watch 还是 onBeforeRouteUpdate 部分取决于应用的具体场景。

使用 onBeforeRouteUpdate:

onBeforeRouteUpdate 是一个路由守卫，它在当前路由改变，但是该组件被复用时调用。这个守卫可以在跳转发生之前执行一些逻辑，比如检查用户权限、确认用户意图，或者直接根据路由变化更新视图。

watch(() => route.params

如果只是简单监听路由参数中的某这改变，直接使用watch(() => route.params 即可。

转载本站文章《vue2升级vue3：vue router使用需要注意的事项随笔》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8987.html