vue关于路由和用户数据保存的问题

Question

我这里有一个头部组件 上面主要是有两个登录和注册 点击可以路由到登录和注册页面 当我登录或者注册以后 登录和注册这两个路由就不能跳转了 并且登录变成用户id名 注册变成退出 然后不管跳转到哪个页面 头部的用户id和退出都能正常显示出来 然后当点击退出的时候 又变回原来的登录注册

我这样写的 当路由到其它页面的时候用户id显示不出来 需要刷新页面才行 并且点击用户id和登录注册的时候还是会路由到这两个页面 这样问题该怎样解决呢 代码太多 不好发 请教大家给个思路

Answer 1

可以把登录注册用户id和退出四个部分都写出来,利用v-if通过判断userInfo来实现界面的显示状态

Answer 2

楼上的就是这个意思把

<router-link to="/login>登录</router-link>
<router-link to="/register>注册</router-link>
<router-link to="/login v-if="state">用户信息</router-link>
<router-link to="/login v-if="state">退出</router-link>

data() {
    return{
        state: true  //判断是否为登录状态,未登录置false
    }
}

Answer 3

<div class="login-bar">

<div v-if="!isLogin">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
</div>
<div v-else>
    <span>{{ this.username }}</span>
    <a @click="logout">退出</a>
</div>

</div>

data() {

return {
    isLogin: false
}

},

methods: {

logout() {
    this.isLogin = false;
    this.$router.replace('/login'); // 回到登录页
}

}

你只是改掉了文字当然不行，而且尽量不要用v-html，直接双花括号或者v-text比较好