使用Vue登录后如何呈现标题和侧边栏 [英] How to render header and sidebar after login using Vue
问题描述
我有一个 Vue.js 应用程序，目前我使用不同的页面呈现它.我遇到了一个问题，当我第一次登录时，它只会根据 vue 路由器呈现作为页面的单个主要组件.我正在寻找一种方法来运行我的登录功能然后转到 /dashboard 但我希望它重新呈现我的 App.vue 文件或找到某种方法来重新加载我的标题和侧边栏在下面代码作为符号现在当我在 /login 上时标题和侧边栏不显示，所以 router.push('/dashboard') 导致除标题和侧边栏渲染
您可以像这样在家长登录后放置您的页面:
const 路由 = [{小路: '/'，组件:() =>import('layouts/MyLayout.vue'),儿童:[//登录后的所有路线{ 路径:''，组件:() =>导入('页面/Index.vue')}]}]在 MyLayout.vue 中，您可以放置标题和侧边栏
你的 MyLayout.vue :
<div><标题></标题><SideBar></SideBar><部分><路由器视图></路由器视图></节></模板><脚本>从'../layouts/Header.vue'导入标题从'../layouts/Sidebar.vue'导入侧边栏....
I have a Vue.js application, currently I render it using different pages. I have run into an issue where when I login the first time it will only render the single main component that is the page according to vue router. I am looking for a way to have my login function run then go to /dashboard but I'd like it to rerender my App.vue file or find some way to reload my header and sidebar in the below code as sign now the header and sidebar don't display when I am on /login so the router.push('/dashboard') results in everything except the header and sidebar rendering
<Header />
<Sidebar v-if="!pageOptions.pageWithoutSidebar" />
<div id="content" class="content" v-bind:class="{ 'content-full-width': pageOptions.pageContentFullWidth, 'content-inverse-mode': pageOptions.pageContentInverseMode }">
<router-view></router-view>
</div>
You can put your page after login with a parent like this :
const routes = [
{
path: '/',
component: () => import('layouts/MyLayout.vue'),
children: [ // ALL ROUTES AFTER LOGIN
{ path: '', component: () => import('pages/Index.vue') }
]
}
]
and in MyLayout.vue you can put your header and sidebar
your MyLayout.vue :
<template>
<div>
<Header></Header>
<SideBar></SideBar>
<section>
<router-view>
</router-view>
</section>
</div>
</template>
<script>
import Header from '../layouts/Header.vue'
import SideBar from '../layouts/Sidebar.vue'
....
这篇关于使用Vue登录后如何呈现标题和侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
