如何使用Vue在登录后呈现页眉和侧边栏

npm install vue
npm install vue-router

// Header.vue
<template>
  <header>
    <!-- 页眉内容 -->
  </header>
</template>

// Sidebar.vue
<template>
  <aside>
    <!-- 侧边栏内容 -->
  </aside>
</template>

// App.vue
<template>
  <div>
    <header v-if="isLoggedIn"></header>
    <sidebar v-if="isLoggedIn"></sidebar>
    <!-- 其他内容 -->
  </div>
</template>

<script>
import Header from './Header.vue'
import Sidebar from './Sidebar.vue'

export default {
  components: {
    Header,
    Sidebar
  },
  data() {
    return {
      isLoggedIn: false // 根据实际登录状态设置
    }
  }
}
</script>

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './Home.vue'
import Login from './Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home,
    meta: { requiresAuth: true } // 需要登录才能访问的页面
  },
  {
    path: '/login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

// 导航守卫，检查登录状态
router.beforeEach((to, from, next) => {
  const isLoggedIn = false // 根据实际登录状态设置
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login') // 未登录，跳转到登录页面
  } else {
    next()
  }
})

export default router

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')