登錄頁(yè)面的實(shí)現(xiàn)及跳轉(zhuǎn)代碼實(shí)例(vue-router)

更新時(shí)間：2023年12月28日 11:44:21 作者：.桃子搖搖冰

在Vue.js中可以使用vue-router來實(shí)現(xiàn)前端路由,通過路由來跳轉(zhuǎn)頁(yè)面,這篇文章主要給大家介紹了關(guān)于登錄頁(yè)面的實(shí)現(xiàn)及跳轉(zhuǎn)(vue-router)的相關(guān)資料,需要的朋友可以參考下

Vue-router

路由的核心：改變URL，頁(yè)面不會(huì)整體刷新

一、創(chuàng)建項(xiàng)目

1、使用vite創(chuàng)建項(xiàng)目

npm init vue@latest

注意：根據(jù)需求，選擇‘可選功能’完成安裝（具體安裝步驟vue.md）

2、項(xiàng)目結(jié)構(gòu)

請(qǐng)?zhí)砑訄D片描述

3、創(chuàng)建登錄項(xiàng)目

<1>創(chuàng)建一個(gè)組件（登錄頁(yè)面），我們把這個(gè)組件稱為單文件組件

位置：（規(guī)范情況下，將組件寫到components目錄下）

命名：大駝峰式命名規(guī)則

格式（三個(gè)部分）：

<script>
</script>
<template>
</template>
<style scoped>
</style>

<2>Login.vue（登錄組件）

<script>
export default {
    // 響應(yīng)式數(shù)據(jù) data() 函數(shù)
    data(){
        return{
            name:'',
            password:'',
            tip:'',
            // 設(shè)置標(biāo)識(shí)
            flag:'false'
        }
    },
    // 方法書寫在 methods 中
    methods:{
        sign(){
            // 先判斷用戶名和密碼是否為空
            if(this.name === '' || this.password === ''){
                // 如果為空的彈出提示
                this.flag='false'
                this.tip='用戶名和密碼為空'
            } else if(this.name ==='admin' && this.password === '123456'){
                this.flag='true',
                this.tip=''
                // 跳轉(zhuǎn)頁(yè)面
                this.$router.push({
                    path:'/logins'
                })
            } else {
                this.flag='false',
                this.tip='賬號(hào)名或密碼錯(cuò)誤'
            }
        }
    }
}
</script>
<template>
    <div class="box1">
        <div>
            <h1>Login</h1>
            <ul>
                <label>
                    <li>用戶：<input type="text" placeholder="請(qǐng)輸入用戶名" v-model.trim="name"></li>
                </label>
                <label>
                    <li>密碼：<input type="password" placeholder="請(qǐng)輸入密碼" v-model.trim="password"></li>
                </label>
                <li><button @click="sign">登錄</button></li>
                <li v-show="flag" :class="{style1:flag}">
                    {{ this.tip }}
                </li>
            </ul>
        </div>
    </div>
</template>
// scoped 樣式的作用域在本組件中
<style scoped>
div.box1 {
    height: 50%;
    width: 100%;
    /* background-color: red; */
}
.style1{
    color:red;
}
 div.box1 div{
    text-align: center;
    height: 50%;
    color:rgb(96, 207, 170);
    /* background-color: aqua; */
    border: 1px solid #111;
 }
    /* 注意：使用彈性布局時(shí)，內(nèi)部所有的元素都會(huì)變成內(nèi)聯(lián)塊 */
 div.box1 div ul li {
    margin-top: 10px;
    list-style: none;
    color:rgb(96, 207, 170)
 }
 div.box1 div ul li button {
    width: 35%;
 }
</style>

Tips：

1、使用彈性布局時(shí)，內(nèi)部所有的元素都會(huì)變成內(nèi)聯(lián)塊

2、在輸入用戶名和密碼的時(shí)候，在表單元素上進(jìn)行數(shù)據(jù)的雙向綁定，v-model=‘響應(yīng)式變量’，進(jìn)行去除前后空格的修飾操作.trim

3、在按鈕上取消默認(rèn)行為(.prevent,相當(dāng)于事件對(duì)象event.defaultPrevent())，并綁定點(diǎn)擊事件，觸發(fā)sign函數(shù)

相當(dāng)于v-on=‘sign’ 簡(jiǎn)寫為@click=‘sign’

4、響應(yīng)式數(shù)據(jù) 模塊是 data函數(shù)，返回一個(gè)對(duì)象

5、methods是一個(gè)對(duì)象，在對(duì)象內(nèi)部書寫各種函數(shù)

①書寫函數(shù)sign函數(shù)

        sign(){
            // 先判斷用戶名和密碼是否為空
            if(this.name === '' || this.password === ''){
                // 如果為空的彈出提示
                this.flag='false'
                this.tip='用戶名和密碼為空'
            } else if(this.name ==='admin' && this.password === '123456'){
                this.flag='true',
                this.tip=''
                // 跳轉(zhuǎn)頁(yè)面
                this.$router.push({
                    path:'/logins'
                })
            } else {
                this.flag='false',
                this.tip='賬號(hào)名或密碼錯(cuò)誤'
            }
        }

注意：

1、函數(shù)中獲取響應(yīng)式數(shù)據(jù)需要使用this獲取

2、通過一個(gè)標(biāo)識(shí)來判斷提示信息是否彈出，使用v-show判斷（注意：v-if和v-show的區(qū)別）

-------v-if（判斷時(shí)，不斷的銷毀重建）

-------v-show（相當(dāng)于使用display:none）

3、用戶名和密碼正確，進(jìn)行跳轉(zhuǎn)頁(yè)面

②頁(yè)面的跳轉(zhuǎn)

使用路由router進(jìn)行頁(yè)面的跳轉(zhuǎn)：用法：this.$router （路由實(shí)例）

this.$router.push()或replace()方法

啟動(dòng)項(xiàng)目，打開頁(yè)面，直接進(jìn)入login頁(yè)面

**方式一：**將Login組件作為App.vue的子組件

在APP.vue中引入Login組件，并注冊(cè)

<script>
import Login from './components/Login.vue'
export default {
  // 參數(shù)是對(duì)象
  components: {Login},
}
</script>

<template>
  // 組件一般都是大駝峰式，和html標(biāo)簽區(qū)分
<Login></Login>
</template>

在使用時(shí)，將原有的所有樣式都清除（src->assets->main.css）

啟動(dòng)項(xiàng)目，打開前端頁(yè)面

問題：在地址欄中輸入任何內(nèi)容，都會(huì)跳轉(zhuǎn)到登錄頁(yè)面

**原因：**因?yàn)槲覀儼袻ogin組件作為了App.vue中模板的內(nèi)容，App.vue是根組件，所以當(dāng)我們的路徑發(fā)生變化時(shí)，只會(huì)顯示Login組件。我們所使用的this.$router.push就會(huì)失效，導(dǎo)致跳轉(zhuǎn)不成功。

補(bǔ)充知識(shí)點(diǎn)：路由（router）

路由：是組件和路徑的一一映射關(guān)系

位置：我們將路由再寫（src->router->路由名稱）

①創(chuàng)建路由

創(chuàng)建路由對(duì)象，通過createRouter函數(shù)創(chuàng)建，首先引入方法

import { createRouter, createWebHashHistory } from "vue-router";

通過createRouter函數(shù)創(chuàng)建路由

// 創(chuàng)建路由實(shí)例
const Router = createRouter({
    // 模式有兩種：createWebHashHistory()--路徑中含有#，createWebHistory()
    history: createWebHashHistory(),
    // 將每個(gè)路由映射到對(duì)應(yīng)的組件
    routes: [
        {
            path:'/logins', // 路徑
            name:'logins',
            component:LoginFirst // 組件--當(dāng)訪問'/'時(shí)就會(huì)顯示LoginFirst組件中的內(nèi)容
        }
    ]
});

要使用LoginFirst組件就需要引入組件

import LoginFirst from '../components/login/LoginFirst.vue'

將路由導(dǎo)出

export default Router

使用路由，在main.js中引入路由，使用路由

import Router from '../src/router/Router'
app.use(Router)

通過對(duì)路由知識(shí)的補(bǔ)充，我們能夠充分理解到方法一的問題，為解決這個(gè)問題，我們使用方式二

**方式二：**應(yīng)該要有路由顯示的位置，但是上面沒有，所以我們需要指定區(qū)域顯示路由，在App.vue中中使用顯示我們的路由,也可以使用

<script>
import Login from './components/Login.vue'
export default {
  // 參數(shù)是對(duì)象
  components: {Login},
}
</script>
<template>
  // 顯示路由的區(qū)域
  <RouterView></RouterView>
</template>

我們使用的是顯示路由，所以登錄的組件（Login.vue）也需要和路徑進(jìn)行一一對(duì)應(yīng)

因?yàn)槲覀冃枰蜷_頁(yè)面就進(jìn)入Login組件，所以我們可以將路徑設(shè)置為‘/’或者‘/login’

// 創(chuàng)建路由實(shí)例
const Router = createRouter({
    history: createWebHashHistory(),
    // 將每個(gè)路由映射到對(duì)應(yīng)的組件
    routes: [
        {
            path:'/',
            // 設(shè)置別名
            alias:'/login'
            component:Login
        },
        {
            path:'/logins',
            name:'logins',
            component:LoginFirst
        }
    ]
});

當(dāng)然Login組件也需要引用

import Login from '../components/Login.vue'

但是，輸入路徑不對(duì)時(shí)，出現(xiàn)空白。用戶體驗(yàn)不好，所以當(dāng)輸入別的路徑時(shí)，出現(xiàn)404NotFound。同樣的我們?cè)诼酚芍羞M(jìn)行設(shè)置

import { createRouter, createWebHashHistory } from "vue-router";
import NotFound from '../components/test/NotFound.vue'
import LoginFirst from '../components/login/LoginFirst.vue'
import Login from '../components/Login.vue'

// 創(chuàng)建路由實(shí)例
const Router = createRouter({
    history: createWebHashHistory(),
    // 將每個(gè)路由映射到對(duì)應(yīng)的組件
    routes: [
        // 404
        {
            path: '/:paths(.*)*',
            component: NotFound
        },
        {
            path:'/',
            component:Login
        },
        {
            path:'/logins',
            name:'logins',
            component:LoginFirst
        }
    ]
});

export default Router

當(dāng)路徑不正確時(shí)，出現(xiàn)NotFound組件。簡(jiǎn)單的寫一個(gè)404頁(yè)面。

<script>
</script>
<template>
    <div>
        404 NotFout
    </div>
</template>
<style>
</style>

詳細(xì)解釋匹配404路徑知識(shí)：

{
  path: '/:path(.*)*',
  component: NotFound
},

將所有匹配到的路徑存放在 $route.params.path 下, 將非法路徑的所有部分作為參數(shù)

我們使用$route.params.path獲取動(dòng)態(tài)路由參數(shù)

<template>
    <div>
        404 NotFout {{ this.$route.params.path }}
    </div>
</template>

區(qū)別：

/:paths(.*)

：如果是這樣書寫的，意思是：將/后所有的路徑放入一個(gè)字符串中

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-fBBnvpIT-1677066821432)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230221113043609.png)]$

/:paths(.*)*

：如果是這樣書寫的，意思是：將/后所有路徑，以/分割，將分割的內(nèi)容，放入數(shù)組中

4、首頁(yè)（登錄進(jìn)去后的頁(yè)面）

<1>設(shè)計(jì)頁(yè)面

注意：這里就需要路由相關(guān)知識(shí)了

<2>創(chuàng)建路由

①一級(jí)標(biāo)簽可以做成超鏈接（a鏈接），但是點(diǎn)擊a標(biāo)簽會(huì)進(jìn)行整個(gè)頁(yè)面的刷新，性能低。我們需要點(diǎn)擊時(shí)，只刷新渲染局部。（改變地址欄路徑，頁(yè)面不會(huì)重新刷新）

通過<router-link to=''></router-link> 來實(shí)現(xiàn)

②我們修改LoginFirst.vue組件（只導(dǎo)了template部分的代碼）

<template>
  <div class="box1">
        <ul>
            <router-link to="/grade2022"><li>2022級(jí)</li></router-link>
            <router-link to="/grade2021"><li>2021級(jí)</li></router-link>
            <router-link to="/grade2020"><li>2020級(jí)</li></router-link>
        </ul>
		 // 顯示區(qū)
        <router-view></router-view>
  </div>
</template>

提示：當(dāng)點(diǎn)擊2022時(shí)，會(huì)在地址欄中顯示/grade2022地址，同時(shí)，/grade2022會(huì)對(duì)應(yīng)一個(gè)組件，因此，需要在路由中設(shè)置路徑與組件的映射

③在路由（Router）中設(shè)置映射

創(chuàng)建三個(gè)Grade組件

在路由中引入，在完成路徑和組件的映射

發(fā)現(xiàn)問題？組件太多了，三個(gè)組件的模板基本相同，只是數(shù)據(jù)不同。因此可以寫一個(gè)組件，復(fù)用組件進(jìn)行傳參。

代碼優(yōu)化：

<1>創(chuàng)建一個(gè)Grade組件，顯示參數(shù)

<2>在路由中引入Grade

<3>配置映射，并傳參

<4>修改router-link to 中的路徑

二、完善需求

1、發(fā)現(xiàn)問題：

當(dāng)路徑地址為/grade/2022時(shí)，Grade組件顯示在App.vue中的區(qū)域中，但是我們的需求是想要Grade組件中的內(nèi)容顯示在LoginFirst組件列表的下方。

解決方法：路由的嵌套

<1>修改路由（我這里嵌套了三個(gè)路由—Login）

{
            path: '/logins',
            name: 'logins',
            component: LoginFirst,
            children: [
                {
                    path: 'grade/:id',
                    component: Grade,
                    children: [
                        {
                            path: 'a1',
                            component: GradeBottom
                        }
                    ]
                }
            ]
        },

注意：

1>使用children關(guān)鍵字，值為數(shù)組，數(shù)組中每一個(gè)元素都是路徑與組件的映射

2>子路由中路徑開始的地方不應(yīng)該有/

<2>修改路徑

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-Z0tfLB4Y-1677066821435)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230221211714963.png)]$

訪問結(jié)果：

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-VLHCXrMZ-1677066821436)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230222192337360.png)]$

<3>修飾樣式

LoginFirst.vue

<script>

</script>
<template>
  <div class="box1">
        <ul>
            <!-- class="router-link-active" 設(shè)置點(diǎn)擊產(chǎn)生高亮行為 -->
            <router-link :to="{name:'grade',params:{id:1}}"><li>2022級(jí)</li></router-link>
            <router-link :to="{name:'grade',params:{id:2}}"><li>2021級(jí)</li></router-link>
            <router-link :to="{name:'grade',params:{id:3}}"><li>2020級(jí)</li></router-link>
        </ul>
        <div><router-view></router-view></div>
  </div>
</template>
<style scoped>
    *{
        margin: 0;
        padding: 0;
    }
    div.box1 ul li {
        display: inline-block;
        text-align: center;
        margin-left: 15px;
        width: 50px;
        height: 30px;
        line-height: 30px;
        background-color: rgb(228, 233, 233);
        list-style: none;
    }
    /* .router-link-active{
        background-color:red;
    } */
</style>

Grade.vue

<script>
// 導(dǎo)入數(shù)據(jù)
import data from '../../Data'
export default {
    // 定義一個(gè)數(shù)組接收數(shù)據(jù)
    data() {
        return {
            list: []
        }
    },
    // 使用參數(shù)
    props:['id'],
    // 鉤子函數(shù)
    mounted() {
        // 獲取id
        const id = this.$route.params.id
        // 使用list接收數(shù)據(jù)，初始化
        this.list = data.filter(item => item.id === id)[0].items
    },
    updated() {
        const id = this.$route.params.id;
        // 更新時(shí)也要更新list
        this.list = data.filter(item => item.id === id)[0].items
    }

}
</script>

<template>
    <!-- <div class="topBox"> Grade---{{ this.$route.params.id }} </div> -->
    <div class="divBox">
        <router-link v-for='item of list' :to="{
            name: 'school',
            params: { id }
        }">{{ item }}</router-link>

        <router-view></router-view>
    </div>
</template>

<style scoped>
/* div.topBox {
    text-align: center;
} */

a {
    margin-left: 10px;
    color:rgb(81, 87, 82);
    font-size:14px
}
</style>

<4>顯示二級(jí)標(biāo)簽（就是路由的嵌套）

 {
            path: '/logins',
            name: 'logins',
            // 當(dāng)?shù)刂窞?main時(shí)也是登錄頁(yè)面
            // 使用別名
            alias:'/main',
            // 使用重定向
            // redirect:{name:'logins'},
            component: LoginFirst,
            children: [
                {
                    path: 'grade/:id',
                    name:'grade',
                    // 方便傳參數(shù)
                    props:true,
                    component: Grade,
                    children: [
                        {
                            path: 'a1',
                            name:'school',
                            component: GradeBottom
                        }
                    ]
                }
            ]
        },

效果圖：

$[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-K6oD7fKS-1677066821436)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230222193105881.png)]$

<5>為了讓路由的使用更加方便，我們可以給路由設(shè)置名稱（ps:前面的路由代碼中已設(shè)置是使用了）

<6>我們?cè)O(shè)置了名稱后，就可以在router-link中使用了，傳遞參數(shù)方便

            <router-link :to="{name:'grade',params:{id:1}}"><li>2022級(jí)</li></router-link>
            <router-link :to="{name:'grade',params:{id:2}}"><li>2021級(jí)</li></router-link>
            <router-link :to="{name:'grade',params:{id:3}}"><li>2020級(jí)</li></router-link>

<7>在push(replace)中使用

this.$router.replace({name:'logins'})

tip:在編程式導(dǎo)航中，可以使用replace替換當(dāng)前位置，它的作用類似于router.push，唯一的不同是，它在導(dǎo)航時(shí)不會(huì)向history添加新記錄

2、新的需求：

當(dāng)點(diǎn)擊一級(jí)菜單時(shí)，顯示對(duì)應(yīng)的二級(jí)菜單，二級(jí)菜單各不相同。

<1>如何在組件中獲取參數(shù)？

通過this.$route.param來獲取參數(shù)

<2>在Grade組件中獲取參數(shù)，根據(jù)一級(jí)菜單不同，加載對(duì)應(yīng)的二級(jí)菜單，因此，需要使用生命周期函數(shù)mounted頁(yè)面加載完成后的事情（初始化的工作一般都在此函數(shù)中運(yùn)行）

    // 定義一個(gè)數(shù)組接收數(shù)據(jù)
    data() {
        return {
            list: []
        }
    },
    // 使用參數(shù)
    props:['id'],
    // 鉤子函數(shù)
    mounted() {
        // 獲取id
        const id = this.$route.params.id
        // 使用list接收數(shù)據(jù)，初始化
        this.list = data.filter(item => item.id === id)[0].items
    },

注意：data是聲明的假數(shù)據(jù)，真實(shí)的數(shù)據(jù)需要從后臺(tái)獲取

data.js假數(shù)據(jù)：

// 數(shù)據(jù)
const data = [
    {
        id:'1',
        items:['計(jì)算機(jī)科學(xué)與技術(shù)','信息管理','信息與計(jì)算']
    },
    {
        id:'2',
        items:['人工智能','計(jì)算機(jī)科學(xué)','大數(shù)據(jù)']
    },
    {
        id:'3',
        items:['云存儲(chǔ)','算法','信息與計(jì)算']
    }
];

export default  data

<3>參數(shù)更新后也要對(duì)數(shù)據(jù)進(jìn)行更新，使用updated函數(shù)

    updated() {
        const id = this.$route.params.id;
        // 更新時(shí)也要更新list
        this.list = data.filter(item => item.id === id)[0].items
    }

<4>動(dòng)態(tài)渲染

<template>
    <!-- <div class="topBox"> Grade---{{ this.$route.params.id }} </div> -->
    <div class="divBox">
        <router-link v-for='item of list' :to="{
            name: 'school',
            params: { id }
        }">{{ item }}</router-link>

        <router-view></router-view>
    </div>
</template>

<5>為了方便使用參數(shù)，可以將props（路徑中的參數(shù)）傳遞給組件。

總結(jié)

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

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

登錄頁(yè)面的實(shí)現(xiàn)及跳轉(zhuǎn)代碼實(shí)例(vue-router)

目錄

Vue-router

一、創(chuàng)建項(xiàng)目

1、使用vite創(chuàng)建項(xiàng)目

2、項(xiàng)目結(jié)構(gòu)

3、創(chuàng)建登錄項(xiàng)目

補(bǔ)充知識(shí)點(diǎn)：路由（router）

4、首頁(yè)（登錄進(jìn)去后的頁(yè)面）

二、完善需求

1、發(fā)現(xiàn)問題：

2、新的需求：

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

登錄頁(yè)面的實(shí)現(xiàn)及跳轉(zhuǎn)代碼實(shí)例(vue-router)

目錄

Vue-router

一、創(chuàng)建項(xiàng)目

1、使用vite創(chuàng)建項(xiàng)目

2、項(xiàng)目結(jié)構(gòu)

3、創(chuàng)建登錄項(xiàng)目

補(bǔ)充知識(shí)點(diǎn)：路由（router）

4、首頁(yè)（登錄進(jìn)去后的頁(yè)面）

二、完善需求

1、發(fā)現(xiàn)問題：

2、新的需求：

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、創(chuàng)建項(xiàng)目

1、使用vite創(chuàng)建項(xiàng)目

2、項(xiàng)目結(jié)構(gòu)

3、創(chuàng)建登錄項(xiàng)目

4、首頁(yè)（登錄進(jìn)去后的頁(yè)面）

二、完善需求

1、發(fā)現(xiàn)問題：