多个页面共用一个vue文件，根据路由不同做出不同处理

一：如何在vue中使用路由

代码

import { useRoute } from 'vue-router';
const route = useRoute();
onMounted(() => {
    console.log('当前路由地址:', route.fullPath);      // 完整路径
    console.log('路由参数:', route.params);           // 路由参数
    console.log('路由名称:', route.name);             // 路由名称
    console.log('路径地址:', route.path);             // 路径部分
});

常用属性解释

// 假设当前访问路径为：/project/post-price/123?status=active

onMounted(() => {
    // 1. fullPath（完整路径）
    // 输出："/project/post-price/123?status=active"
    console.log('完整路径:', route.fullPath);
    
    // 2. path（路径部分）
    // 输出："/project/post-price/123"
    console.log('路径部分:', route.path);
    
    // 3. params（动态路由参数）
    // 假设路由配置为：/project/post-price/:id
    // 输出：{ id: '123' }
    console.log('路由参数:', route.params);
    
    // 4. query（URL查询参数）
    // 输出：{ status: 'active' }
    console.log('查询参数:', route.query);
    
    // 5. name（路由名称）
    // 假设路由配置中定义了name: 'PostPrice'
    // 输出："PostPrice"
    console.log('路由名称:', route.name);
    
    // 6. meta（路由元信息）
    // 假设路由配置中设置了meta: { requiresAuth: true }
    // 输出：{ requiresAuth: true }
    console.log('元信息:', route.meta);
});

我要做的功能是将合同拆分 将销售合同与采购合同这两类单独再写两个与合同列表同级的页面

我最开始时是把判断路由的逻辑写到了onMonted里面，但是我切换销售合同，采购合同这两个页面的时候，并没有触发判断路由的逻辑，原因是组件被复用（比如同一组件不同路由），onMounted可能不会再次触发。

所以要将判断的逻辑放到watch里面，路由一变化，就执行判断的逻辑

// 监听路由变化
watch(
    () => route.path,
    (newPath) => {
        if (newPath === '/postPrice/List') {
            console.log('当前路由:', '/postPrice/List');
        } else if (newPath === '/project/purchaseContract') {
            console.log('当前路由:', '/project/purchaseContract');
        }
    },
    { immediate: true } // 立即执行一次
);