。在app.vue组件中,根据用户的登录状态来决定渲染哪些导航选项是非常常见的需求。可以通过以下步骤实现:
isLoggedIn
的状态属性,并设置初始值为false
。// main.js
import Vue from 'vue'
import store from './store'
import App from './App.vue'
new Vue({
store,
render: h => h(App)
}).$mount('#app')
<!-- app.vue -->
<template>
<div>
<nav>
<router-link to="/">首页</router-link>
<router-link v-if="isLoggedIn" to="/dashboard">仪表盘</router-link>
<router-link to="/about">关于</router-link>
<router-link v-if="isLoggedIn" to="/logout">退出</router-link>
<router-link v-else to="/login">登录</router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
computed: {
isLoggedIn() {
return this.$store.state.isLoggedIn;
}
}
}
</script>
在上面的代码中,根据isLoggedIn
的值来动态显示或隐藏登录和退出导航选项。
这样,当用户从main.js登录时,app.vue组件会根据用户的登录状态来动态渲染条件导航。如果用户已登录,则会显示仪表盘和退出选项,否则显示登录选项。
对于这个问题,推荐腾讯云相关产品:
领取专属 10元无门槛券
手把手带您无忧上云