vue使用路由技術(shù)實(shí)現(xiàn)登錄成功后跳轉(zhuǎn)到首頁
更新時(shí)間：2025年05月15日 10:18:26 作者：運(yùn)維@小兵
本文主要介紹了vue使用路由技術(shù)實(shí)現(xiàn)登錄成功后跳轉(zhuǎn)到首頁,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、概述
路由，決定從起點(diǎn)到終點(diǎn)的路徑的進(jìn)程
在前端工程中，路由指的是根據(jù)不同的訪問路徑，展示不同組件的內(nèi)容
Vue Router是Vue.js的官方路由
二、使用步驟
安裝vue-router
npm install vue-router@4
在src/router/index.js中創(chuàng)建路由器，并導(dǎo)出
//導(dǎo)入vue-router
import { createRouter, createWebHistory } from 'vue-router'
//導(dǎo)入組件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'
//定義路由關(guān)系
const routes = [
{ path: '/login', component: LoginVue },
{ path: '/', component: LayoutVue }
]
//創(chuàng)建路由器
const router = createRouter({
history: createWebHistory(),
routes: routes
});
export default router
在vue應(yīng)用實(shí)例中使用router
在main.js中導(dǎo)入創(chuàng)建應(yīng)用實(shí)例的js文件，并調(diào)用實(shí)例的use方法使用路由器
import router from '@/router' app.use(router)
聲明router-view標(biāo)簽，展示組件內(nèi)容
在App.vue文件的template標(biāo)簽中，定義router-view標(biāo)簽
<template> <router-view></router-view> </template>
將來根據(jù)路由匹配到的組件內(nèi)容，都會(huì)在router-view標(biāo)簽內(nèi)進(jìn)行展示
三、配置登錄成功后跳轉(zhuǎn)首頁
Login.vue
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/')
四、參考資料
https://www.bilibili.com/video/BV14z4y1N7pg
到此這篇關(guān)于vue使用路由技術(shù)實(shí)現(xiàn)登錄成功后跳轉(zhuǎn)到首頁的文章就介紹到這了,更多相關(guān)vue 登錄成功后跳轉(zhuǎn)到首頁內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了解決vue跨域axios異步通信問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
如何利用Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁及右鍵菜單
標(biāo)簽頁一般配合菜單實(shí)現(xiàn),當(dāng)你點(diǎn)擊一級(jí)菜單或者二級(jí)菜單時(shí),可以增加對(duì)應(yīng)的標(biāo)簽頁,當(dāng)你點(diǎn)擊對(duì)應(yīng)的標(biāo)簽頁,可以觸發(fā)對(duì)應(yīng)的一級(jí)菜單或者二級(jí)菜單,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3+Element?Plus實(shí)現(xiàn)動(dòng)態(tài)標(biāo)簽頁及右鍵菜單的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue項(xiàng)目強(qiáng)制清除頁面緩存的例子
今天小編就為大家分享一篇vue項(xiàng)目強(qiáng)制清除頁面緩存的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vuejs中父子組件之間通信方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js父組件向子組件傳遞消息以及子組件向父組件傳遞消息具體操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了Vue SPA 首屏優(yōu)化方案的的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
vue+element-plus上傳圖片及回顯問題及數(shù)量限制
本文主要介紹了vue+element-plus上傳圖片及回顯問題及數(shù)量限制，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了Vue自定義元素身上的右鍵事件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue 代碼高亮插件全面對(duì)比測評(píng)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要介紹了Vue?table新增、編輯，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue組件渲染與更新實(shí)現(xiàn)過程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03