Vue3组件开发-GlobalHeader

阅读量：

相较于前一个模块，该部件的实现难度明显降低，然而在实际编写过程中，仍遭遇了诸多难以预料的异常状况。

1 环境

所采用的主要开发环境为VScode结合TypeScript、VUE3与Bootstrap框架。

该组件即为brandbar，用于实现页面顶部导航条功能。在逻辑处理上，主要通过验证用户登录状态来决定界面显示内容，若用户已登录则展示“XXX欢迎”的提示信息，反之则显示登录与注册按钮，并实现跳转功能。

2 代码

2.1 GlobalHeader组件：

复制代码

    //创建一个globalheader组件
    <template>
    <nav class="navbar navbar-dark bg-primary justify-content-between mb-4 px-4">
    <a class="navbar-borand" href="#" :style="{color :'black', fontSize: '18px'}">者也专栏</a>
    <ul v-if="!user.isLogin" class="list-inline mb-0">
        <li class="list-inline-item"><a href="#" class="btn-outline-light my-

全部评论 (0)

还没有任何评论哟~