Talk is cheap, Show the code

·
在完成npm和vue的環(huán)境安裝，并了解了基本的目錄和文件結(jié)構(gòu)以后，直接寫一個(gè)帶登錄和首頁(yè)的demo做示例，快速了解一個(gè)vue工程的創(chuàng)建和基本的頁(yè)面跳轉(zhuǎn)

第一步創(chuàng)建工程

1、選擇手動(dòng)模式創(chuàng)建工程

npm create app-demo

2、添加router到工程中

第二步：創(chuàng)建登錄頁(yè)面

1、新建文件

2、文件代碼

LoginByCode.vue

<template>
    <div class="login-code">
        <input placeholder="請(qǐng)輸入手機(jī)號(hào)"/>
        <br/>
        <input placeholder="請(qǐng)輸入手機(jī)驗(yàn)證碼"/>
    </div>
</template>

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

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

LoginByPwd.vue

<template>
    <div>
        <input placeholder="請(qǐng)輸入手機(jī)號(hào)或賬號(hào)"/>
        <br/>
        <input placeholder="請(qǐng)輸入密碼"/>
    </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'"
      >
        驗(yàn)證碼登錄
      </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 {
        // 驗(yàn)證碼登錄
        console.log("驗(yàn)證碼登錄");
      }
    },
    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、點(diǎn)擊登錄按鈕后跳轉(zhuǎn)到首頁(yè)

Vue-Router是如何工作的

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

const routes = [
    // 通過redirect實(shí)現(xiàn)重定向，可以在用戶訪問默認(rèn)的url時(shí)跳轉(zhuǎn)到指定的登錄頁(yè)面
  {
    path: '/',
    redirect: 'login'
  },
  // 通過component組件方式注冊(cè)，path是路徑，跳轉(zhuǎn)時(shí)使用path跳轉(zhuǎn)
  {
    path: '/login',
    name: 'login',
    component: LoginView
  },
  // 通過chunk方式注冊(cè)，可以實(shí)現(xiàn)延遲加載
  {
    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')
  }
]

// 創(chuàng)建route對(duì)象
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 通過export default 暴露router對(duì)象給外部使用
export default router

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

因?yàn)槭褂檬謩?dòng)創(chuàng)建模式，vue-cli已經(jīng)自動(dòng)將router對(duì)象掛在到App對(duì)象

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

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

3、想要跳轉(zhuǎn)必須在最外層的App.vue定義

router是一個(gè)棧結(jié)構(gòu)，router-view相當(dāng)于路由的rootview，必須預(yù)先放在最外層的div里，系統(tǒng)也會(huì)默認(rèn)往router-view注入第一個(gè)棧頂vue頁(yè)面

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

push、replace和go的使用區(qū)別

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

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

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

用homePage替換棧頂?shù)膙ue頁(yè)面，瀏覽器歷史不變

this.$router.go(-1)

推出一個(gè)棧頂元素，回到上一個(gè)頁(yè)面文章來源地址http://www.zghlxwxcb.cn/news/detail-676041.html

到了這里，關(guān)于Vue3.0極速入門 - 登錄demo的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！