vue中在当前页面跳转当前页面，解决页面初始化数据的问题

在博客代码编写过程中，遇到了曾今遇到过的问题：如果路由加载的页面是同一个页面，如何解决页面的初始化数据不变更问题。

比如这两个路由指向同一个文件，当点击切换路由的时候，里面的数据没有发生变化。

{
    path: "original",
    name: "OriginalIndex", component: () => import('@/components/posts/index.vue'),
    meta: { title: '原创' }
},
{
    path: "recommend",
    name: "RecommendIndex", component: () => import('@/components/posts/index.vue'),
    meta: { title: '推荐' }
},

你说使用路由守卫，在进来的时候，添加 beforeRouteUpdate()，在里面进行后台请求获取数据然后渲染到页面。官方说法是:

 beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
  },

我从 xxx/original 到 xxx/recommend 不属于动态参数变化，所以这个方法根本不会进入。事实证明确实如此。

onBeforeRouteUpdate((to, from)=>{
    console.log(to, from)  // 没打印，没有进来此方法
    // 我的查询数据逻辑
})

无奈之下，只好继续思考，还有其他解决方案吗？

我想到了另一个，变量监听：

监听一个路由参数，比如 meta.symbol，如果参数变化了，就重新请求后台。

//router.ts
// 给不同的路由添加不同的标识
{
    path: "original",
    name: "OriginalIndex", component: () => import('@/components/posts/index.vue'),
    meta: { title: '原创', symbol: 'O' }
},
    {
    path: "recommend",
    name: "RecommendIndex", component: () => import('@/components/posts/index.vue'),
    meta: { title: '推荐', symbol: 'R' }
},
// 监听这个标识
// @/components/posts/index.vue 
watch(() => route.meta.symbol, (to, from) => {
    if (to != from) {
        // 执行请求后台操作
    }
})