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) {
        // 执行请求后台操作
    }
})

 

有问题反馈加微信:mue233 私聊送一本电子书,绝对受益良多! 微信公众号:慕意,分享创业、使用的软件和教程~
知识星球精选推荐 » vue中在当前页面跳转当前页面,解决页面初始化数据的问题