了解一下通過(guò)v-if語(yǔ)句來(lái)實(shí)現(xiàn)狀態(tài)欄的切換
首先我們來(lái)看一下簡(jiǎn)書登錄和未登錄狀態(tài)下導(dǎo)航欄的變化
-
未登錄狀態(tài)
未登錄狀態(tài) -
登錄狀態(tài)
登錄狀態(tài)
我們用判斷token是否為空的方式來(lái)判定是否有用戶登錄瓮栗，主要是根據(jù)是否存在loginUser對(duì)象來(lái)顯示不同導(dǎo)航欄
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
onClick() {
var that = this;
this.$http
.post('http://localhost:8080/sys/list', {"email": this.email, "password": this.password})
.then(function (response) {
alert(JSON.stringify(response.data.data.list));
localStorage.setItem("loginUser", JSON.stringify(response.data.data.list))
that.$router.push("/")
})
}
}
如果LoginUser存在
data() {
return {
user: JSON.parse(localStorage.getItem('loginUser')),
personList: []
}
},
即user !=null時(shí)顯示信息
<b-nav-item v-if="user!=null">
<router-link to="/">發(fā)現(xiàn)</router-link>
</b-nav-item>
<b-nav-item v-if="user!=null">
<router-link to="/subscriptions">關(guān)注</router-link>
</b-nav-item>
<b-nav-item v-if="user!=null">
<router-link to="/notifications"><a>消息</a></router-link>
</b-nav-item>
如果LoginUser不存在
即user==null時(shí)
<b-nav-item href="#" >Aa</b-nav-item>
<b-nav-item href="#" v-if="user===null"><router-link to="/sign_in">登錄</router-link> </b-nav-item>
<b-nav-item href="#"v-if="user===null"><router-link to="/sign_up">注冊(cè)</router-link> </b-nav-item>
<b-nav-item-dropdown right v-if="user!=null">
