做项目的网站,大丰做网站的公司,东莞营销网站建设直播,网站做微信支付对接vue3前端开发-小兔鲜项目-登录和非登录状态下的模板适配#xff01;有了上次的内容铺垫#xff0c;我们可以根据用户的token来判定#xff0c;到底是显示什么内容了。 1#xff1a;我们在对应的导航组件内修改完善一下内容即可。
script setup
import { useUserSt…vue3前端开发-小兔鲜项目-登录和非登录状态下的模板适配有了上次的内容铺垫我们可以根据用户的token来判定到底是显示什么内容了。 1我们在对应的导航组件内修改完善一下内容即可。
script setup
import { useUserStore } from /stores/user;
const userStore useUserStore()
/scripttemplatenav classapp-topnavdiv classcontainerul!--多模板渲染区分用户登录状态--template v-ifuserStore.userInfo.tokenlia hrefjavascript:;i classiconfont icon-user/i{{userStore.userInfo.account}}/a/liliel-popconfirm title确认退出吗? confirm-button-text确认 cancel-button-text取消template #referencea hrefjavascript:;退出登录/a/template/el-popconfirm/lilia hrefjavascript:;我的订单/a/lilia hrefjavascript:;会员中心/a/li/templatetemplate v-elselia hrefjavascript:; click$router.push(/login)请先登录/a/lilia hrefjavascript:;帮助中心/a/lilia hrefjavascript:;关于我们/a/li/template/ul/div/nav
/templatestyle scoped langscss
.app-topnav {background: #333;ul {display: flex;height: 53px;justify-content: flex-end;align-items: center;li {a {padding: 0 15px;color: #cdcdcd;line-height: 1;display: inline-block;i {font-size: 14px;margin-right: 2px;}:hover {color: $xtxColor;}}~li {a {border-left: 2px solid #666;}}}}
}
/style 2主要是第一步导入我们刚刚定义的pinia内容。
然后再补充完善一下对应的v-if判定参数。 有这个判定后就可以根据token信息来判定到底是显示什么内容了。
非常方便。如果没有这个token就会显示第二个模板的内容《提示用户请先登录》
