解决的问题:
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>
效果: