vue3中頁面跳轉(zhuǎn)兩種實(shí)現(xiàn)方式
z1. 普通函數(shù)的頁面跳轉(zhuǎn)
<template>
<router-view></router-view>
<router-link to="/">首頁</router-link>
<button @click="go">我的</button>
</template>
<script setup>
import { useRouter } from 'vue-router'
// 使用 useRouter 創(chuàng)建一個(gè) router 實(shí)例
const router = useRouter()
// 定義 go 函數(shù)以便路由跳轉(zhuǎn)
function go() {
router.push({ path: '/my' })
}
// 將 go 函數(shù)暴露給模板
</script>2.箭頭函數(shù)的實(shí)現(xiàn)方法
<template>
<router-view></router-view>
<router-link to="/">首頁</router-link>
<button @click="go">我的</button>
</template>
<script setup>
import { useRouter } from 'vue-router'
// 使用 useRouter 創(chuàng)建一個(gè) router 實(shí)例
const router = useRouter()
// 定義 go 函數(shù)以便路由跳轉(zhuǎn)
const go = () => {
router.push('/my')
}
</script>在router 文件夾下的 index.vue文件添加 ' /my ' 路由
{
path: '/my',
component: () => import('@/views/my'),
hidden: true
},在 permission.js白名單文件下 添加 '/my'
const whiteList = ['/login', '/register', '/forget_pwd', '/index', '/my']
注 ：下面是 Vue Router 的組件，用于處理 Vue 應(yīng)用中的路由功能。它們通常用于定義路由的視圖和鏈接。
- <router-view> 是一個(gè)用于展示匹配路由組件的占位符。
- <一> 嵌套路由
1. 路由路徑和組件的關(guān)系
在 Vue 應(yīng)用中，路由路徑（例如 /home、/about）與組件（例如 HomeComponent、AboutComponent）是關(guān)聯(lián)的。
const routes = [
{ path: '/', component: HomeComponent },
{ path: '/about', component: AboutComponent }
]2. 路由視圖占位符
<router-view> 是一個(gè)占位符，用于告訴Vue Router 在這個(gè)位置渲染當(dāng)前路由匹配的組件?？梢园阉斫鉃橐粋€(gè)動(dòng)態(tài)的容器，負(fù)責(zé)顯示與當(dāng)前路徑相匹配的組件。
3. 路由視圖占位符
當(dāng)用戶在瀏覽器中導(dǎo)航到不同的路徑時(shí)。Vue Router 會(huì)根據(jù)路由配置找到對應(yīng)的組件，并將這些組件渲染到<router-view> 中 。列如：
當(dāng)用戶訪問 / 路徑時(shí)，HomeComponent 會(huì)被渲染到 <router-view> 位置
當(dāng)用戶訪問 /about 路徑時(shí)，AboutComponent 會(huì)被渲染到 <router-view> 位置
4. 示例
假設(shè)你有一個(gè)簡單的Vue 應(yīng)用，有兩個(gè)頁面：主頁面和關(guān)于頁。路由配置如下
const routes = [
{ path: '/', component: HomeComponent },
{ path: '/about', component: AboutComponent }
]<template>
<div>
<router-view></router-view>
</div>
</template>當(dāng)用戶訪問 / 路徑時(shí)，HomeComponent 會(huì)被渲染到 <router-view> 位置
<!-- HomeComponent -->
<template>
<div>
<h1>Home Page</h1>
</div>
</template>當(dāng)用戶訪問 /about 路徑時(shí)，AboutComponent 會(huì)被渲染到 <router-view> 位置
<!-- AboutComponent -->
<template>
<div>
<h1>About Page</h1>
</div>
</template>
<二> 命名視圖 ：允許你在一個(gè)頁面中同時(shí)展示多個(gè) <router-view>，每個(gè) <router-view> 可以渲染不同的組件。
1.當(dāng)用戶訪問路徑 /dashboard 時(shí)，vue router 會(huì)同時(shí)渲染所有與該路徑相關(guān)的組件到各自的命名視圖中。所有的<router-view>組件會(huì)同時(shí)被填充內(nèi)容，而不是按某種順序或條件來渲染。
2. 假設(shè)有以下路由配置
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HeaderComponent from '../components/HeaderComponent.vue'
import MainComponent from '../components/MainComponent.vue'
import FooterComponent from '../components/FooterComponent.vue'
const routes = [
{
path: '/dashboard',
components: {
header: HeaderComponent,
main: MainComponent,
footer: FooterComponent
}
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router以及對應(yīng)的Vue組件模板
<!-- App.vue -->
<template>
<div>
<router-view name="header"></router-view>
<router-view name="main"></router-view>
<router-view name="footer"></router-view>
</div>
</template>HeaderComponent.vue：
<template>
<header>
<h1>Header</h1>
</header>
</template>MainComponent.vue：
<template>
<main>
<h2>Main Content</h2>
</main>
</template>FooterComponent.vue：
<template>
<footer>
<p>Footer</p>
</footer>
</template><router-link> 是一個(gè)用于生成導(dǎo)航鏈接的組件，使得用戶可以通過點(diǎn)擊鏈接來改變當(dāng)前的路由。
總結(jié)
到此這篇關(guān)于vue3中頁面跳轉(zhuǎn)兩種實(shí)現(xiàn)方式的文章就介紹到這了,更多相關(guān)vue3頁面跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js中Line第三方登錄api的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue.js中Line第三方登錄api實(shí)現(xiàn)代碼，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
Vue transition實(shí)現(xiàn)點(diǎn)贊動(dòng)畫效果的示例
點(diǎn)贊動(dòng)畫是網(wǎng)頁評論中常見的功能，本文將介紹如何用vue實(shí)現(xiàn)這一效果。點(diǎn)贊時(shí)愛心縮小變大，變大時(shí)略微大一點(diǎn)再變正常，取消點(diǎn)贊時(shí)愛心無動(dòng)畫，同時(shí)數(shù)字滾動(dòng)，+1 時(shí)向上滾動(dòng)，-1 時(shí)向下滾動(dòng)2021-05-05
vue+springboot實(shí)現(xiàn)項(xiàng)目的CORS跨域請求
這篇文章主要介紹了vue+springboot實(shí)現(xiàn)項(xiàng)目的CORS跨域請求，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
Vue中使用方法、計(jì)算屬性或觀察者的方法實(shí)例詳解
這篇文章主要介紹了Vue中如何使用方法、計(jì)算屬性或觀察者的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-10-10
Element DateTimePicker日期時(shí)間選擇器的使用示例
這篇文章主要介紹了Element DateTimePicker日期時(shí)間選擇器的使用示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
今天小編就為大家分享一篇vue表單自定義校驗(yàn)規(guī)則介紹，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了TypeScript中集成Tween.js踩坑記錄，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
文章詳細(xì)介紹了Vue Router中的路由匹配語法,包括動(dòng)態(tài)參數(shù)、正則約束、可重復(fù)參數(shù)、可選參數(shù)以及敏感與嚴(yán)格選項(xiàng),這些高級(jí)特性使得URL設(shè)計(jì)更加靈活和精確,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-10-10
vscode中使用vue的一些插件總結(jié)(方便開發(fā))
對于很多使用vscode編寫vue項(xiàng)目的新手同學(xué)來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于vscode中使用vue的一些插件,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
VUE中使用Wavesurfer.js實(shí)現(xiàn)可視化音頻波形功能
這篇文章主要介紹了VUE中使用Wavesurfer.js實(shí)現(xiàn)可視化音頻波形功能的相關(guān)資料,通過npm安裝、創(chuàng)建組件、傳入音頻路徑參數(shù),并配置波紋顏色、大小等樣式屬性,需要的朋友可以參考下2025-06-06