有条件地渲染 Vue 元素还是高阶组件？

Question

我有点吃不消了。任何帮助都会很棒

我在这方面已经有一段时间了，在转向你之前我尝试了不同的方法。你是我的最后一道防线。

问题：

我使用 VueRouter 设置了 Vue 页面，以及一些基本的 JWT 身份验证。 我想在某些页面上呈现 Header 元素，而不是在其他页面上。

我尝试使用v-if，但它很乱而且感觉不对。

我试过这个答案： How to render header and sidebar after login using Vue 但是在登录页面之后，它会呈现空白页面

这里是例子（简化）

App.js：

<template >
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
    export default {
       name: "app"
    }
</script>

路由器/index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from './view/Home.vue'
import Login from './view/Login.vue'
import PageContainer './container/PageContainer.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  path: '/',
    component: () => import('../container/PageContainer.vue'),
    children: [ 
      { 
        path: '',
        name: "home",
        component: () => Home
      },
      {
        path: '*',
        redirect: '/'
      }
    ]
]

const router = new VueRouter({
  mode: "history",
  routes
})

router.beforeEach((to, from, next) => {
  // redirect to login page if not logged in and trying to access a restricted page
  const publicPages = ['/login'];
  const authRequired = !publicPages.includes(to.path);
  const loggedIn = localStorage.getItem('token');

  if (authRequired && !loggedIn) {
    return next('/login');
  }

  next();
})

export default router

页面容器：

<template>
    <div class="container">
        <Header/>
        <div class="main">
            <Navbar/>
            <section class="page">
               <router-view/>
            </section>
        </div>
    </div>
</template>

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

export default {
    name: "container",
    components: {
        Navbar,
        Header
    }
}
</script>

如果我尝试转到基本 url，Login 页面会根据router.beforeEach 条件正确呈现。 登录成功并JWT存储后：

• 点击beforeEach

• 不进入条件

• 应该点击next()，但页面没有被重定向？

比起v-if，我更喜欢路由器版本的解决方案，这让我检查令牌，说是否已经有用户并基于该用户呈现页面，但感觉不对？我尝试了一堆其他愚蠢的东西试图让它工作，但无济于事。

我对 Vue 比较陌生，因此我们将不胜感激。谢谢

Answer 1

好的，我想通了。反复试验。 我在router/index.js 中稍微更改了routes 变量，它起作用了。 如果有人需要，我会留在这里。

由于某种原因，它在渲染无名箭头函数时出现问题，但实际上并没有在控制台中引发错误。

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  path: '/',
    component: PageContainer,
    children: [ 
      { 
        path: '',
        name: "home",
        component: Home
      },
      {
        path: '*',
        redirect: '/'
      }
    ]
]

干杯！