快捷導(dǎo)航

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

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

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

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

App.vue文件

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

很簡單，只是加了用于顯示路由頁面內(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)入路由
 
// 注冊路由
const app = createApp(App)
app.use(router)
app.mount("#app")

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

router/index.js文件

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

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

view/index.vue文件

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

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

view/content.vue文件

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

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

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

您可能感興趣的文章: