快捷導(dǎo)航

vue3實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的示例代碼

更新時(shí)間：2024年02月29日 09:52:24 作者：諾坎普的風(fēng)間

這篇文章給大家介紹了vue3如何實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn),文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

可以看到，我在初始的vue項(xiàng)目中添加了一個(gè)文件夾router，并在里面添加了一個(gè)index.js文件。而view文件夾則是存放需要跳轉(zhuǎn)的頁(yè)面，里面分別是代表首頁(yè)的index.vue文件和內(nèi)容頁(yè)面content.vue，接下來(lái)看看5個(gè)文件各自有什么內(nèi)容。

App.vue文件

<script setup>
</script>
 
<template>
    <router-view></router-view>
</template>
 
<style scoped>
 
</style>

很簡(jiǎn)單，只是加了用于顯示路由頁(yè)面內(nèi)容的<router-view></router-view>

main.js文件

import {createApp} from 'vue'
import App from './App.vue'
import router from "@/router/index.js"  // 導(dǎo)入路由
 
// 注冊(cè)路由
const app = createApp(App)
app.use(router)
app.mount("#app")

這個(gè)文件中我引入了router文件夾中的index.js文件，并且使用了其中的router，那么下面來(lái)看看這個(gè)index.js文件的內(nèi)容。

router/index.js文件

import {createRouter, createWebHistory} from "vue-router";
 
 
// 路由配置
const routes = [
    {
        //斜杠重定向到首頁(yè)
        path: "/",
        redirect: "/index",
    },
    {
        //首頁(yè)
        path: "/index",
        name: "index",
        component: () => import('@/views/index.vue')
    },
    {
        //內(nèi)容頁(yè)
        path: "/content",
        name: "content",
        component: () => import('@/views/content.vue')
    },
   
]
 
// 路由對(duì)象
const router = createRouter({
    history: createWebHistory(),
    routes: routes,
})
 
export default router   // 導(dǎo)出供其他組件導(dǎo)入

在這個(gè)文件中我定義了一個(gè)路由配置和一個(gè)路由對(duì)象，并為其配置路由配置，最后導(dǎo)出該組件。

view/index.vue文件

<template>
<div class="container">
  <li><router-link to="/">首頁(yè)</router-link></li>
  <li><router-link to="/content">內(nèi)容頁(yè)面</router-link></li>
</div>
</template>

這里我們用router-link來(lái)作為跳轉(zhuǎn)的按鈕（當(dāng)然可以在外面再套一個(gè)button添加樣式）

view/content.vue文件

<template>
<div class="container">
  <li><router-link to="/">首頁(yè)</router-link></li>
  <li><router-link to="/content">內(nèi)容頁(yè)面</router-link></li>
</div>
</template>

這里我們用router-link來(lái)作為跳轉(zhuǎn)的按鈕（當(dāng)然可以在外面再套一個(gè)button添加樣式），和首頁(yè)一樣，這樣點(diǎn)擊后就可以實(shí)現(xiàn)跳轉(zhuǎn)了

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

您可能感興趣的文章: