手把手教你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)文章
vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能實(shí)戰(zhàn)記錄(word/PDF/圖片/docx/doc/xlxs/txt)
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)多文件上傳與預(yù)覽功能的相關(guān)資料,包括word/PDF/圖片/docx/doc/xlxs/txt等格式文件上傳,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
vue-cli中vue本地實(shí)現(xiàn)跨域調(diào)試接口
這篇文章主要介紹了vue-cli中vue本地實(shí)現(xiàn)跨域調(diào)試接口,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
VUE和Antv G6實(shí)現(xiàn)在線拓?fù)鋱D編輯操作
這篇文章主要介紹了VUE和Antv G6實(shí)現(xiàn)在線拓?fù)鋱D編輯操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vite打包出現(xiàn)"default"?is?not?exported?by?"no
這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)"default"?is?not?exported?by?"node_modules/...問題解決的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開發(fā)的實(shí)例代碼
本篇文章主要介紹了vue+mockjs模擬數(shù)據(jù)實(shí)現(xiàn)前后端分離開發(fā)的實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08

