vue设置路由title,但刷新页面时title失效的解决

在Vue项目中，如果使用了vue-router进行路由管理，那么设置路由的标题常常是必要的。但是在刷新页面时，路由标题会失效，这是因为刷新页面会重新加载所有资源，包括Vue实例和路由相关的资源。为了解决这个问题，需要进行以下操作：

1. 使用Vue Router的导航守卫

Vue Router提供了导航守卫（navigation guard）来处理路由变化前、后、和滚动行为。在Vue Router中设置导航守卫可以在路由切换之前更新页面的标题。

我们可以使用beforeEach方法设置全局导航守卫，例如：

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

该导航守卫会在每次路由变化前执行，将当前路由对应的标题更新为document的title。

1. 在路由元信息（meta）中设置标题

另一种解决方法是在路由表中设置元信息，使用meta属性来存储标题，然后在导航守卫中通过读取路由的元信息来更新页面的标题。例如：

const routes = [
  {
    path: '/',
    component: HomeComponent,
    meta: {
      title: '首页'
    }
  },
  {
    path: '/about',
    component: AboutComponent,
    meta: {
      title: '关于我们'
    }
  }
]

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

路由表中每个路由都有一个meta属性，用于存储元信息。在beforeEach导航守卫中，我们读取当前路由的meta.title来更新页面的标题。

以上两种方法都能够解决路由标题在刷新页面时失效的问题，开发者可以按照自己的需求选择其中一种方法来解决。