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>

router / 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

PageContainer：

<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

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

由于某种原因，它在呈现无名箭头功能时遇到问题，但实际上并未在控制台中引发错误。

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

干杯！

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

1 个答案: