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