Vue3+TS+VueRouter问题

最近开发一个功能：在打开主页路由界面时，地址后面可能有query参数，如果有type值就需要进行一些逻辑处理。

为了区分/home和/home?type=xxx的情况，常规思路是在组件中使用beforeRouteEnter方法，判断to.query.type是否存在。

但在实际使用时发现TS+Vue3的模式会导致该方法无效，不会被执行，以下两种方式均无效。

// views/Home/Home.vue
// 方式一




// 方式二

经过查阅资料，发现确实存在该问题，因此换了一种思路，使用导航守卫+store的方式。

// router/index.ts
router.beforeEach((to, from, next) => {
  if (to.path === '/home') {
    if (to.query.type) {
      homeStore.setType(to.query.type);
    }
  }
  return next();
});

// store/home.ts
import { defineStore } from 'pinia';

export const useHomeStore = defineStore({
  id: 'home',
  state: () => ({
    type: '',
  }),
  actions: {
    setType(type = '') {
      this.type = type;
    }
  }
});

// views/Home/Home.vue