vue 登陆界面的基本原理路由

最新推荐文章于 2024-04-24 20:27:21 发布

大狼狗

最新推荐文章于 2024-04-24 20:27:21 发布

阅读量786

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/big_wolf0/article/details/114458248

版权

本文探讨了Vue.js中的页面间跳转，利用localStorage存储用户信息实现个性化显示，并通过导航守卫确保仅登录用户可访问其他页面。登录组件演示了如何验证并存储登录状态，主页则展示了用户会话管理和登出操作。

摘要由CSDN通过智能技术生成

解决的问题：
1.页面之间的跳转
2.本地存储值的应用来实现用户信息的显示
3.导航守卫来实现不登陆无法访问其他网页，只有登陆才能访问其他网页
4.点击登陆自动跳转到首页，没有登陆则跳转到登入页面
登陆组件：

<template>
  <div class="about">
    <form @submit.prevent="doLogin">
        <input type="text" v-model="form.username">
        <input type="password" v-model="form.password">
        <button>登入</button> 
    </form>
  </div>
</template>
<script>
export default {
    data(){
        return{
            form:{
                username:"",
                password:""
            }
           
        }
    },
    methods:{
        doLogin(){
            console.log(this.form)
            // 本地存储 
            localStorage.setItem("usr",this.form.username);
            // 获取本地存储的值
            // localStorage.getItem("usr");
            // 用router方法跳转到任意网页
            this.$router.push("/")
        }
    }
}
</script>

主页：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">首页</router-link>
       | <router-link to="/blog">博客</router-link>
       | <router-link to="/video">视频</router-link>
       || <span v-show="showUser">欢迎：{{username}}  <button @click="logout">注销</button></span>
    </div>
    <router-view/>
  </div>
</template>
<script>
export default {
  data(){
    return{
      username:localStorage.getItem("usr"),
      showUser:localStorage.getItem("usr")
    }
  },
  methods:{
    logout(){
      localStorage.clear();
      this.$router.push("/login")
    }
  },
  watch:{
    '$route.path':function(){
      this.username=localStorage.getItem("usr")
      this.showUser=localStorage.getItem("usr")
    }
  }
}
</script>
<style>
</style>