1.做登錄框

步驟：

（1） 創(chuàng)建vue項(xiàng)目，使用vite方式創(chuàng)建；npm init vue@latest

（2）項(xiàng)目結(jié)構(gòu)：

•  src：代碼書寫位置；
• app.vue：根組件；
• main.js：將根組件與首頁進(jìn)行連接；
• index.html：首頁；
• package-lock.json:項(xiàng)目配置，安裝依賴，啟動命令的配置；
• vite.config.js：vite的配置文件；

（3）書寫登錄組件

components：規(guī)范情況，將組件書寫components下；

組件：一個vue文件，我們把這個vue組件稱之為單文件組件 SFC（Signed File Component） 格式：Login.vue（文件名是大駝峰式命名規(guī)則）；

Tips:

（1）設(shè)置了display:flex后，容器中所有的項(xiàng)目都會變成內(nèi)聯(lián)塊；

（2）在輸入用戶名目密碼的表單元素上做數(shù)據(jù)的雙向綁定，v-model="響應(yīng)式變量"；

（3）使用修飾符.trim 取消輸入內(nèi)容前后的空格；

（4）在按鈕上取消默認(rèn)行為（.prevent，相當(dāng)于事件對象event.defaultPrevent()），并綁定click 事件（v-on:click 簡寫成@click）,當(dāng)點(diǎn)擊時，觸發(fā)login函數(shù)login；

（5）方法，響應(yīng)式數(shù)據(jù)是data函數(shù)，返回一個對象。 methods是一個對象 ，在對象內(nèi)部書寫各種函數(shù)；

（6)login方法的實(shí)現(xiàn)

       (a)在methods中創(chuàng)建login方法

? ? ? ? ? ? ?methods:{
? ? ? ? ? ? ? ? login() {
? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ?}

       (b)判斷輸入的數(shù)據(jù)是否為空

在方法中，可以通過this來獲取響應(yīng)式數(shù)據(jù)

如果為空：

如果出錯：

注： isShow：用來控制 類樣式tip，isShow=true,就顯示class='tip',否則，class='', 通過isShow控制提示框的顯示和隱藏，使用v-show命令；

（c）跳轉(zhuǎn)界面

（4）啟動項(xiàng)目，打開頁面，直接進(jìn)入login頁面

（a)  登陸成功后，讓頁面進(jìn)行跳轉(zhuǎn)，跳轉(zhuǎn)到Index組件 Index.vue的內(nèi)容如下 ：

Index.vue所在位置：

  (b) 創(chuàng)建路由

在router目錄下，創(chuàng)建index.js文件，編寫路徑與組件的映射關(guān)系；

1）怎么進(jìn)入登錄？通過在router目錄的index.js中配置登錄路徑與登錄組件的映射；

2）但是，輸入的路徑如果不對，頁面就會顯示空白。這樣不友好。因此，當(dāng)路徑不存在時，顯示 404。如何做呢？

3）HobbyOne.vue   （HobbyTwo.vue，HobbyThree.vue同理）（此處為本人無聊制作而成，并無其他意義?。。。?/p>

4）NotFound.vue    （此處為本人無聊制作而成，并無其他意義?。。。?/p>

（c）告訴app應(yīng)用，使用路由。

（5）在App.vue中通過標(biāo)簽進(jìn)行指定。

總結(jié)

到此這篇關(guān)于如何利用vue實(shí)現(xiàn)登陸界面及其跳轉(zhuǎn)的文章就介紹到這了,更多相關(guān)vue登陸界面及跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！