先看一下實際登錄效果圖：

登錄前：

登錄后：

登錄后其他頁面：

---

使用說明：

語言vue

UI庫 vant

數據管理 vuex

---

(1) 引入vant

import Vue from 'vue'; import { NavBar } from 'vant';Vue.use(NavBar);

vant 基本用法

---

(2) 封住vue 組件 m-header

view層

<template><van-nav-barclass="m-header"fixed:title="title":left-text="index ? '首頁' : '返回'"@click-left="onClickLeft"><div slot="right"><aclass="login":href="loginInfo.logoutUrl"v-if="loginInfo.isLogin">退出</a><imgv-if="loginInfo.isLogin"class="user-head-img":src="loginInfo.myAvatar"/><aclass="login":href="loginInfo.loginUrl"v-if="!loginInfo.isLogin">登錄</a></div></van-nav-bar> </template> <script> import { NavBar } from "vant" import _default, { mapState, mapActions } from "vuex" export default {name: "m-header",props: {title: {type: String,default: ""},// 是否為首頁index: {type: Boolean,default: false}},data() {return {}},computed: {...mapState(["loginInfo"])},created() {this.getLoginInfo().then(() => {this.$emit("callback")})},methods: {...mapActions(["getLoginInfo"]),//左側返回 地址處理onClickLeft() {let navname = this.$route.namelet url = ""switch (navname) {case "CurrentWorks":case "WorksManag":case "worksManag":url = "/"breakcase "work_detail":url ="/" +(this.$route.query.from ? this.$route.query.from : "currentWorks")breakcase "Upload":case "AuthorInfo":url = "/worksManag"breakcase "video_lists":url = "/currentWorks"breakdefault:if (!this.index) {url = -1}break}//alert(url)if (url == "-1") {this.$router.go(url)} else {this.$router.push(url)}}} } </script> <style lang="scss" scoped> @import "../../../../style/common.scss"; .m-header {height: rem(82);font-size: rem(30);line-height: rem(82);width: 100%;position: relative;background: rgba($color: #120804, $alpha: 0.9);z-index: 999;&:after {border-bottom: 1px solid #400708;}.user-head-img {width: rem(54);height: rem(54);border-radius: rem(27);float: right;margin-top: rem(12);margin-right: rem(12);// position: absolute;// right: rem(0);// top: rem(-66);}.login {color: #808080;// display: inline-block;// font-size: rem(30);line-height: rem(82);float: right;} } </style>

action層

BASE_URL 是公共地址

// 獲取登陸信息getLoginInfo({ commit }) {return new Promise(resolve => {http.post(BASE_URL + "", {task: "base"}).then(data => {commit("loginInfo", data ? data.result : {});resolve();});});},

mutation層

loginInfo: (state, data) => {state.loginInfo = data;},

---

（3）使用組件

<m-header:title="'首 頁'" :index="true"/> <m-header :title="'上傳作品'" /> <m-header :index="true" :title="'本期作品'" />

總結

以上是生活随笔為你收集整理的使用vant 制作导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。