Vue3.0極速入門(三) - 登錄demo

Talk is cheap, Show the code

·
在完成npm和vue的環境安裝，並了解了基本的目錄和文件結構以后，直接寫一個帶登錄和首頁的demo做示例，快速了解一個vue工程的創建和基本的頁面跳轉

第一步創建工程

1、選擇手動模式創建工程

npm create app-demo

2、添加router到工程中

第二步：創建登錄頁面

1、新建文件

2、文件代碼

LoginByCode.vue

<template>
    <div class="login-code">
        <input placeholder="請輸入手機號"/>
        <br/>
        <input placeholder="請輸入手機驗證碼"/>
    </div>
</template>

<script>
export default {
    name: 'LoginByCode'
}
</script>

<style scoped>
.login-code {
    position:relative;
}
</style>

LoginByPwd.vue

<template>
    <div>
        <input placeholder="請輸入手機號或賬號"/>
        <br/>
        <input placeholder="請輸入密碼"/>
    </div>
</template>

<script>
export default {
    name: 'LoginByPwd'
}
</script>

LoginView.vue

<template>
  <div class="login-containt">
    <img class="logo" src="../assets/logo.png" />
    <login-by-code v-show="logonType === 'code'"></login-by-code>
    <login-by-pwd v-show="logonType === 'pwd'">></login-by-pwd>
    <button class="login-button" v-on:click="onSubmit">登錄</button>
    <br />
    <div class="login-bottom-containt">
      <button
        class="change-login-type"
        @click="onChangeLoginType"
        v-show="logonType === 'pwd'"
      >
        驗證碼登錄
      </button>
      <button
        class="change-login-type"
        @click="onChangeLoginType"
        v-show="logonType === 'code'"
      >
        密碼登錄
      </button>
    </div>
  </div>
</template>

<script>
import LoginByCode from "../components/LoginByCode.vue";
import LoginByPwd from "../components/LoginByPwd.vue";

export default {
  components: { LoginByCode, LoginByPwd },
  name: "LoginView",
  data() {
    return {
      logonType: "pwd",
    };
  },
  methods: {
    onSubmit() {
      this.$router.push('/homePage');
      if (this.$data.logonType === "pwd") {
        // 密碼登錄
        console.log("密碼登錄");
      } else {
        // 驗證碼登錄
        console.log("驗證碼登錄");
      }
    },
    onChangeLoginType() {
      if (this.$data.logonType === "pwd") {
        this.$data.logonType = "code";
      } else {
        this.$data.logonType = "pwd";
      }
      console.log("切換登錄方式");
    },
  },
};
</script>

<style  scoped>
.login-containt {
  text-align: center;
}

.logo {
  margin-top: 40%;
  width: 100px;
  height: 100px;
}
.login-bottom-containt {
  text-align: center;
}
.login-button {
  margin-top: 40px;
}
.change-login-type {
  text-align: right;
  margin-top: 40px;
}
</style>

3、效果圖

第三步：修改路由

修改router/index.js文件

router/index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import LoginView from '../views/LoginView.vue'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    redirect: 'login'
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  {
    path: '/homePage',
    name: 'homePage',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

router.beforeEach((to,from,next)=>{
  const toPath = to.path;
  const fromPath = from.path;
  console.log(fromPath)
  console.log(toPath)
  next()
});

router.onError((err) => {
  console.log(err)
})


export default router

2、修改App.vue文件

App.vue

<template>
  <div id="app" class="app-containt">
    <router-view class="router-containt"></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
</style>

3、點擊登錄按鈕后跳轉到首頁

Vue-Router是如何工作的

1、index.js的route定義是前提

const routes = [
    // 通過redirect實現重定向，可以在用戶訪問默認的url時跳轉到指定的登錄頁面
  {
    path: '/',
    redirect: 'login'
  },
  // 通過component組件方式注冊，path是路徑，跳轉時使用path跳轉
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  // 通過chunk方式注冊，可以實現延遲加載
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

// 創建route對象
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 通過export default 暴露router對象給外部使用
export default router

2、想要使用必須在main.js掛載

因為使用手動創建模式，vue-cli已經自動將router對象掛在到App對象

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

3、想要跳轉必須在最外層的App.vue定義

router是一個棧結構，router-view相當於路由的rootview，必須預先放在最外層的div里，系統也會默認往router-view注入第一個棧頂vue頁面

<template>
  <div id="app" class="app-containt">
    <router-view class="router-containt"></router-view>
  </div>
</template>

push、replace和go的使用區別

this.$router.push('/homePage')

往棧中壓入homePage頁面，瀏覽器歷史增加一條瀏覽記錄

this.$router.replace('/homePage')

用homePage替換棧頂的vue頁面，瀏覽器歷史不變

this.$router.go(-1)

推出一個棧頂元素，回到上一個頁面