vue当前页面刷新后却跳转到了首页

朋友们使用vue写的网页，然后今天发现个问题，就是我在b页面刷新，他回到了a页面，a页面也是默认路由首页，正常不应该是在b页面刷新还是b页面嘛，


```html
 {
                path: '/', name: 'home',
                meta: {
                    title: '首页',
                }, component: () => import('./views/a/a')
            },
            {
                path: '/medical', name: 'medical',
                meta: {
                    title: '诊疗',
                }, component: () => import('./views/b/b')
            },
            {
                path: '/publicize', name: 'publicize',
                meta: {
                    title: '科普',
                }, component: () => import('./views/c/c')
            },

```

刷新的时候页面路径是什么

试试这个
const router = new VueRouter({ mode: 'history', routes: [...] })

  • 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7476318
  • 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：vue关于从页面A跳转到页面B再跳转回到页面A，参数保持不变
  • 除此之外, 这篇博客: 2021-11-06 学习记录--Vue-实现页面之间切换后，不会改变原来的浏览位置，不会跳回到页面最顶部中的 一、实现从A页面切换到B页面，再次切换到A页面时，不会自动跳转到A页面的最顶部，而是停留在A页面原来的浏览位置 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 造成原因：Vue自带一个属性：destroyed（销毁）
    解决方法：用<keep-alive></keep-alive>进行包裹
    在这里插入图片描述
    如下图中最下面所示：有四个可切换的页面：首页（Home.vue）、分类（Category.vue）、购物车（ShopCart.vue）、我的（Profile.vue）
    在这里插入图片描述

  • 以下回答由chatgpt基于相关博客总结生成:

    根据参考资料，结合现有的知识得出的解决方案如下：

    问题分析：使用vue编写的网页，在刷新b页面后却跳转到了默认路由的a页面，可能是因为 b 页面的状态没有正确保存，导致在刷新后状态丢失，而默认跳转到了 a 页面。

    解决方案如下：

    1.在需要局部刷新的标签上加上 v-if="isRouterAlive"，以防止 b 页面在刷新后状态丢失，代码如下:

    <div class="main-container">
  <div :class="{ 'fixed-header': fixedHeader }">
    <navbar v-if="isRouterAlive" />
  </div>
  <app-main v-if="isload" />
</div>

    2.在需要触发消息通知的页面引入通知组件，并隐藏，以防止页面刷新时消息也刷新，代码如下：

    <info-message v-if="false"/>

    3.点击详情时，调用触发子页面的 reload() 方法，以局部刷新只刷新消息而不刷新页面，代码如下：

    this.$refs.childComponent.reload();

    4.在子页面（如消息通知页面）的 methods 同级加上 inject: ["reload"]，在需要重新加载时，调用 this.reload() 即可实现刷新消息，而不刷新整个页面。

    完整代码示例如下：

    // 父组件
<template>
  <div>
    <!-- 在需要触发消息通知的页面引入通知组件，并隐藏 -->
    <info-message v-if="false"/>
    <router-view ref="childComponent" />
  </div>
</template>
<script>
export default {
  methods: {
    // 在详情页点击按钮，调用该方法触发子页面的reload()方法
    handleClick() {
      this.$refs.childComponent.reload();
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <div v-for="msg in messages" :key="msg.id">{{msg.content}}</div>
  </div>
</template>
<script>
export default {
  inject: ["reload"], //用于刷新消息通知
  methods: {
    // 刷新消息方法
    reload(){
      // 执行需要刷新的操作
      // ...
      // 刷新完成后调用父组件注入的reload()方法
      this.reload();
    }
  },
}
</script>

这可能是因为你的路由设置中没有为每个子页面设置唯一的 path 属性，导致在刷新时页面跳转到了默认的路由首页。请确认你的路由设置中已为每个子页面设置唯一的 path 属性。

另外，你也可以尝试在路由设置中使用 history 模式，以避免在刷新或重新加载页面时出现这种情况。使用 history 模式后，路由会更像常规的 URL，而不是带有锚点的 URL。这种设置可以避免浏览器在刷新和重新加载时默认返回到路由的基本路径。在 Vue 中启用 history 模式很简单，只需在路由设置中添加一个 mode 属性即可：

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})