Vue3中监听Vue Router路由meta的layout属性无响应问题排查

问题描述 #

我尝试在Vue3中创建一个watcher来捕获Vue Router路由meta对象中定义的layout属性变化，但切换路径时没有任何反应。

App.vue代码 #

<script setup lang="ts">
import { watch } from "vue"
import { useRoute } from 'vue-router'

const route = useRoute();
watch ( () => route.meta.layout, layout => {
  console.log(layout);
})
</script>

更新：路由配置文件（index.ts）

import { createRouter, createWebHistory } from "vue-router";
import UsersView from "@/views/UserView.vue";
import GatewayView from "@/views/GatewayView.vue";
import NotFoundView from "@/views/NotFoundView.vue";
import { LayoutsName } from '@/layouts/LayoutsNameEnum';

const routes = [
  { 
    name: "root",
    path: '/', 
    redirect: '/gateway' 
  },
  {
    name: "notFound",
    path: "/:pathMatch(.*)*", 
    component: NotFoundView,
    meta: {
      layout: LayoutsName.EmptyLayout,
    }
  },
  {
    name: "gateway",
    path: "/gateway",
    component: GatewayView,
    meta: {
      displayName: 'GATEWAYS',
      icon: 'mdi-antenna',
      layout: LayoutsName.DashboardLayout,
    }
  },
  {
    name: "users",
    path: "/users",
    component: UsersView,
    meta: {
      displayName: 'USERS',
      icon: 'mdi-account-group',
      layout: LayoutsName.DashboardLayout,
    }
  }
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: routes,
});

export default router;

问题原因 #

1. 响应式失效：route.meta并非响应式对象，路由切换时route是被整体替换的，而非修改原对象的meta属性，所以直接监听route.meta.layout无法感知变化。
2. 测试场景无差异：从路由配置看，/gateway和/users的layout值完全相同，切换这两个路由时，layout没有变化，自然不会触发watch回调；只有切换到404页面（EmptyLayout）才会有值的差异，可能你没测试这个场景。

解决方案 #

方案1：监听整个route对象并对比layout变化 #

通过监听完整的route对象，开启深度监听，在回调中对比新旧路由的layout值：

<script setup lang="ts">
import { watch } from "vue"
import { useRoute } from 'vue-router'

const route = useRoute();
watch(route, (newRoute, oldRoute) => {
  const newLayout = newRoute.meta.layout;
  const oldLayout = oldRoute.meta.layout;
  if (newLayout !== oldLayout) {
    console.log(newLayout);
  }
}, { deep: true })
</script>

方案2：使用全局路由守卫（更推荐） #

如果是为了切换页面布局，用路由守卫比watch更直接，在路由配置文件中添加：

// 全局前置守卫
router.beforeEach((to, from) => {
  const newLayout = to.meta.layout;
  const oldLayout = from.meta.layout;
  if (newLayout !== oldLayout) {
    console.log(newLayout);
    // 这里可以写布局切换的逻辑，比如更新全局状态中的layout值
  }
});

方案3：监听路由标识（fullPath/name） #

路由切换时fullPath或name一定会变化，监听它们后再获取当前的meta.layout：

<script setup lang="ts">
import { watch } from "vue"
import { useRoute } from 'vue-router'

const route = useRoute();
watch(() => route.fullPath, () => {
  console.log(route.meta.layout);
})
</script>

内容的提问来源于stack exchange，提问作者betta7391