关于vue3在vue-router开发中的坑

当涉及到在Vue.js 3中使用Vue Router时，尽管它是一个强大的工具，但也存在一些容易陷入的坑。所以想和大家一起探讨一些在Vue 3和Vue Router开发中常见的问题和解决方法，帮助小伙伴们避免这些坑，提高开发效率和代码质量。

1. Composition API与路由守卫的结合

在Vue 3中，引入了Composition API，这为组织和复用代码提供了更灵活的方式。然而，在使用Composition API编写路由守卫时，有时会遇到一些挑战。

import { useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const route = useRoute();
    const isLoggedIn = ref(false);

    onMounted(() => {
      // 这里无法访问 `isLoggedIn` 变量
      console.log(isLoggedIn.value); // undefined
    });

    return {
      route,
      isLoggedIn,
    };
  },
};

注意点：确保在使用Composition API时正确引入和使用路由守卫。可以考虑将路由守卫相关的逻辑放在 onBeforeRouteEnter 或 beforeRouteLeave 中，以确保能够正确访问组件的状态和属性。

2. 动态路由参数的处理

Vue Router允许动态路由参数，但在处理这些参数时，有时可能会遇到一些意外情况。

const routes = [
  {
    path: '/user/:id',
    component: UserComponent,
    props: true,
  },
];

注意点：在处理动态路由参数时，确保组件能够正确地获取和使用这些参数。可以使用 props: true 来自动将路由参数映射为组件的props属性，同时注意在组件内部处理这些参数的更新和变化。

3. 导航守卫的正确使用

Vue Router提供了导航守卫来控制路由的跳转和权限验证，但在Vue 3中，如何正确使用导航守卫可能会有所不同。

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to, from, next) => {
  // 在此处访问不到组件实例的状态和方法
  console.log(this.isLoggedIn); // undefined
  next();
});

注意点： 在Vue 3中，导航守卫中无法像Vue 2中那样直接访问组件实例。可以通过使用Composition API中的 useRoute 和 useRouter 方法来获取当前路由信息和路由实例，然后结合组件的状态来进行逻辑处理。

4.组件内守卫异步逻辑处理

在组件内守卫中，经常需要进行异步操作，如数据加载、权限验证等。确保在守卫中正确处理异步逻辑和等待数据加载完成。

import { onBeforeRouteEnter } from 'vue-router';

export default {
  data() {
    return {
      user: null,
    };
  },
  async onBeforeRouteEnter(to, from, next) {
    try {
      await this.fetchUser();
      next();
    } catch (error) {
      console.error('Error fetching user:', error);
      // 处理错误情况
      next(false); // 可以阻止路由导航
    }
  },
  methods: {
    fetchUser() {
      return axios.get('/api/user').then(response => {
        this.user = response.data;
      });
    },
  },
};

注意点：

在开发过程中，根据Vue 3的新特性和守卫的执行时机来合理地组织代码，避免因为异步操作或访问实例的错误而导致的问题。