vue-router—14案例：模拟登录跳转

末蓝、 2022-01-15 02:07 217阅读 0赞

<template>
      <div class="login">
        <div class="login-box">
          <h2>登录</h2>
          <form @submit.prevent='sendLogin' autocomplete="off">
            <div><input placeholder="请输入用户名" type="text" name="user" ref="userInput" /></div>
            <div><input placeholder="请输入密码" type="password" name="password" /></div>
            <div class="login-btn"><input type="submit" value="一键登入" /></div>
          </form>
          <div class="back-index">
            <router-link  to="/">首页>>></router-link>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'login',
        data () {
          return {}
        },
        methods: {
          sendLogin () {
              // 登录
            let username = this.$refs.userInput.value;
            this.$local.save("miaov", {
              login:true,
              userName:username
            })
            this.$router.push('/');
    
          }
        }
      }
    </script>
    <style>
    
    </style>

index.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

home.vue

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][] 看下如何存用户信息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220114/f8367489e9b64e34a0eccdfb38af370d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220114/935912adec664dcc88c127c70746102c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220114/41b703404f854941b20be3141aed5f97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220114/4955a0c392e045c1b8af64953b18f37d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20220114/3fc8173b07a74b0eb47a37d9d9c62c2d.png