Vue登录通过本地存储跳转页面进行渲染

一.登录页面

     <template>
     <div>
      <form>
        <label for="">
          用户名:
        </label>
        <input type="text" v-model ="person">
        <br>
        <label for="">
          密码:
        </label>
        <input type="password" v-model="password" id="pass">

        <input type="button" value="登录" @click="add">
      </form>
    </div>
</template>

<script>
export default {
  data() {
    return {
      person:'',
      password:''
    }
  },
  methods: {
    add(){
      let newList ={id:Date.now(),person:this.person,password:this.password}
      let list = JSON.parse(localStorage.getItem('cmts')|| '[]')
      list.unshift(newList)
      localStorage.setItem('cmts',JSON.stringify(list))
       this.user =this.content =''
       this.$emit('gogo')
       this.$router.push({path:'/profile'})
    }
  },
}
</script>

<style >
input{
  border: 1px solid black
}
#pass{
  margin-left: 15px;
}
</style>

二.跳转页面，我这里是通过路由跳转的

     <template>
<div  @gogo="loadComments">

       <ul>
      <li v-for="item in list" :key="item.id">
  <span>用户名:{{item.person}}</span>
  <time>密码:{{item.password}}</time>
      </li>
    </ul>
</div>
</template>

<script>
import home from 'components/Home/home'
export default {
components:{
  home
},
data() {
  return {
    result:null,
    list:[
      {id:Date.now(),person:'小刘',password:123456}
    ]
  }
},
methods: {
  loadComments(){
    let list = JSON.parse(localStorage.getItem('cmts')|| '[]')
    this.list = list
  }
},
created() {
  this.loadComments()
},
}

</script>

<style>

</style>