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

Question

我有点酸。 任何帮助都会很棒

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

问题：

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

我试过v-if但它很乱而且感觉不对。

我试过这个答案： How to render header and sidebar after login using Vue but over the login page, it renders blank pages

这是示例（简化）

应用程序.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: '/'
      }
    ]
]

干杯!