快捷導(dǎo)航

vue3中頁(yè)面跳轉(zhuǎn)兩種實(shí)現(xiàn)方式

更新時(shí)間：2024年09月03日 09:01:37 作者：治金的blog

在Vue3中Vue?Router是一個(gè)常用的路由管理庫(kù),它提供了一種簡(jiǎn)單而強(qiáng)大的方式來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn)和導(dǎo)航,這篇文章主要給大家介紹了關(guān)于vue3中頁(yè)面跳轉(zhuǎn)的兩種實(shí)現(xiàn)方式,需要的朋友可以參考下

z1. 普通函數(shù)的頁(yè)面跳轉(zhuǎn)

<template>
  <router-view></router-view>
  <router-link to="/">首頁(yè)</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="/">首頁(yè)</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ù)路由配置找到對(duì)應(yīng)的組件，并將這些組件渲染到<router-view> 中。列如：

當(dāng)用戶訪問(wèn) / 路徑時(shí)，HomeComponent 會(huì)被渲染到 <router-view> 位置

當(dāng)用戶訪問(wèn) /about 路徑時(shí)，AboutComponent 會(huì)被渲染到 <router-view> 位置

4. 示例

假設(shè)你有一個(gè)簡(jiǎn)單的Vue 應(yīng)用，有兩個(gè)頁(yè)面：主頁(yè)面和關(guān)于頁(yè)。路由配置如下

const routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent }
]

<template>
  <div>

     <router-view></router-view>
  </div>

</template>

當(dāng)用戶訪問(wèn) / 路徑時(shí)，HomeComponent 會(huì)被渲染到 <router-view> 位置

<!-- HomeComponent -->
<template>
  <div>

     <h1>Home Page</h1>
  </div>

</template>

當(dāng)用戶訪問(wèn) /about 路徑時(shí)，AboutComponent 會(huì)被渲染到 <router-view> 位置

<!-- AboutComponent -->

<template>
  <div>

     <h1>About Page</h1>
  </div>
</template>

<二> 命名視圖 ：允許你在一個(gè)頁(yè)面中同時(shí)展示多個(gè) <router-view>，每個(gè) <router-view> 可以渲染不同的組件。

1.當(dāng)用戶訪問(wèn)路徑 /dashboard 時(shí)，vue router 會(huì)同時(shí)渲染所有與該路徑相關(guān)的組件到各自的命名視圖中。所有的<router-view>組件會(huì)同時(shí)被填充內(nèi)容，而不是按某種順序或條件來(lá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

以及對(duì)應(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)航鏈接的組件，使得用戶可以通過(guò)點(diǎn)擊鏈接來(lái)改變當(dāng)前的路由。

總結(jié)

到此這篇關(guān)于vue3中頁(yè)面跳轉(zhuǎn)兩種實(shí)現(xiàn)方式的文章就介紹到這了,更多相關(guān)vue3頁(yè)面跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: