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

解決的問題：

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>

           

效果：