vue3实现页面跳转的示例代码

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

import {createApp} from 'vue'
import App from './App.vue'
import router from "@/router/index.js"  // 导入路由
 
// 注册路由
const app = createApp(App)
app.use(router)
app.mount("#app")

import {createRouter, createWebHistory} from "vue-router";
 
 
// 路由配置
const routes = [
    {
        //斜杠重定向到首页
        path: "/",
        redirect: "/index",
    },
    {
        //首页
        path: "/index",
        name: "index",
        component: () => import('@/views/index.vue')
    },
    {
        //内容页
        path: "/content",
        name: "content",
        component: () => import('@/views/content.vue')
    },
   
]
 
// 路由对象
const router = createRouter({
    history: createWebHistory(),
    routes: routes,
})
 
export default router   // 导出供其他组件导入

<template>
<div class="container">
  <li><router-link to="/">首页</router-link></li>
  <li><router-link to="/content">内容页面</router-link></li>
</div>
</template>

<template>
<div class="container">
  <li><router-link to="/">首页</router-link></li>
  <li><router-link to="/content">内容页面</router-link></li>
</div>
</template>