手把手教你Vue3實(shí)現(xiàn)路由跳轉(zhuǎn)
一、安裝 vue-router
npm install vue-router@4
二、新建 vue 頁面
在 src
目錄下新建 view
目錄用來存放 vue
的頁面。
然后在 view
目錄下新建兩個(gè) vue
頁面,分別是 login.vue
和 register.vue
。
2.1 login.vue
<template> <div> 當(dāng)前是登錄頁面 </div> </template> <script> export default { name: "login" } </script> <style scoped> </style>
2.2 register.vue
<template> <div> 當(dāng)前是注冊(cè)頁面 </div> </template> <script> export default { name: "register" } </script> <style scoped> </style>
三、新建路由文件
在 src
目錄下新建 router
目錄用來存放路由配置的頁面。
3.1 新建 index.js
在 router 目錄下新建 index.js 配置路由。
import {createRouter, createWebHistory} from 'vue-router' import routes from './routes' // 導(dǎo)入 router 目錄下的 router.js const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router;
目前 routes
里面還沒有路由路徑等內(nèi)容,因此我們要再新建一個(gè) routes.js
文件。
3.2 新建 routes.js
還是在 router
目錄下新建 routes.js
import Register from '@/view/register.vue' import Login from '@/view/login.vue' const routes = [ { name: 'login', path: '/login', component: Login }, { name: 'register', path: '/register', component: Register } ]; export default routes
導(dǎo)入剛剛新建的 vue
頁面,然后和 path
綁定在一塊。
四、在 App.vue 中配置路由的跳轉(zhuǎn)
<template> <div id = "app"> <p> <el-button> <router-link to="/login">登錄</router-link> </el-button> <el-button> <router-link to="/register">注冊(cè)</router-link> </el-button> </p> <router-view/> </div> </template> <script> // App.vue 的名稱叫 app export default { name: 'app' } </script>
注意要使用 router-link
標(biāo)簽來進(jìn)行路由的跳轉(zhuǎn)。
el-button
是這邊 Element UI
框架的控件,如果沒安裝,可以不使用。
五、在 main.js 中 use 路由
import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' import router from './router/index' // 加載 router 底下的 index.js 路由配置文件 const app = createApp(App) app.use(router) app.use(ElementPlus) // 沒安裝 Element UI 可以不用 app.mount('#app')
六、src 目錄結(jié)構(gòu)
src
│ App.vue
│ main.js
│
├─router
│ index.js
│ routes.js
│
└─view
login.vue
register.vue
七、結(jié)果
7.1 默認(rèn)頁面
7.2 點(diǎn)擊登錄
7.3 點(diǎn)擊注冊(cè)
總結(jié)
到此這篇關(guān)于Vue3實(shí)現(xiàn)路由跳轉(zhuǎn)的文章就介紹到這了,更多相關(guān)Vue3路由跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)
- Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁面
- vue在.js文件中如何進(jìn)行路由跳轉(zhuǎn)
- vue如何實(shí)現(xiàn)路由跳轉(zhuǎn)到外部鏈接界面
- vue-router路由跳轉(zhuǎn)問題 replace
- vue跳轉(zhuǎn)同一個(gè)路由參數(shù)不同的問題
- 關(guān)于vue路由監(jiān)聽事件跳轉(zhuǎn)的問題
- vue項(xiàng)目中路由跳轉(zhuǎn)頁面不變問題及解決
- 關(guān)于Vue3路由push跳轉(zhuǎn)問題(解決Vue2this.$router.push失效)
- Vue路由跳轉(zhuǎn)步驟詳解
相關(guān)文章
Vue3.2.x中的小技巧及注意事項(xiàng)總結(jié)
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,是目前最火的前端框架之一,是前端工程師的必備技能,下面這篇文章主要給大家介紹了關(guān)于Vue3.2.x中的小技巧及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-04-04解決Vue使用bus總線時(shí),第一次路由跳轉(zhuǎn)時(shí)數(shù)據(jù)沒成功傳遞問題
這篇文章主要介紹了解決Vue使用bus總線時(shí),第一次路由跳轉(zhuǎn)時(shí)數(shù)據(jù)沒成功傳遞問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07詳解如何制作并發(fā)布一個(gè)vue的組件的npm包
這篇文章主要介紹了詳解如何制作并發(fā)布一個(gè)vue的組件的npm包,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11Vue的指令中實(shí)現(xiàn)傳遞更多參數(shù)
這篇文章主要介紹了Vue的指令中實(shí)現(xiàn)傳遞更多參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05解決vue數(shù)組中對(duì)象屬性變化頁面不渲染問題
今天小編就為大家分享一篇解決vue數(shù)組中對(duì)象屬性變化頁面不渲染問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08Vue中如何合并el-table第一列相同數(shù)據(jù)
這篇文章主要介紹了Vue中如何合并el-table第一列相同數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例
今天小編就為大家分享一篇Vue v-for循環(huán)之@click點(diǎn)擊事件獲取元素示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11