vue 实现组件切换tab（菜单）页刷新页面

在Vue中实现组件切换tab页并刷新页面，可以通过以下步骤来实现：

1. 使用`<router-view>`作为内容的占位符，用于显示匹配到的路由组件。
2. 定义路由配置，将不同的tab页对应到不同的组件上。
3. 当切换到不同的tab页时，可以通过编程式导航跳转到不同的路由，从而更新`<router-view>`中显示的组件。
4. 如果需要在切换tab时刷新页面，可以在路由守卫中或者使用`watch`监听路由变化，然后执行刷新逻辑。

具体实现示例：

// 1. 定义路由配置
const routes = [
  { path: '/home', component: Home, name: 'Home' },
  { path: '/profile', component: Profile, name: 'Profile' },
  // ... 其他路由配置
];

// 2. 创建路由实例
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
});

// 3. 在Vue实例中使用router-view
new Vue({
  router,
  template: `
    <div>
      <nav>
        <router-link to="/home">首页</router-link>
        <router-link to="/profile">个人中心</router-link>
        <!-- ... -->
      </nav>
      <router-view></router-view>
    </div>
  `
}).$mount('#app');

如果需要在每次切换tab时刷新页面，可以在组件内部使用`watch`来监听当前路由的变化：

watch: {
  '$route' (to, from) {
    // 当路由变化时，执行页面刷新逻辑
    window.location.reload();
  }
}

或者使用路由的`beforeEach`守卫来实现：

router.beforeEach((to, from, next) => {
  // 如果是切换tab的路由，则刷新页面
  if (to.path !== from.path) {
    window.location.reload();
  }
  next();
});