vue3实现页面跳转

有需求是在vue项目中实现点击按钮完成页面跳转。这里不适用a标签,而是用vue自带的vue-router。

首先看一下项目结构

src

│ App.vue

│ main.js

├─router

│ index.js

└─views

index.vue

content.vue

可以看到,我在初始的vue项目中添加了一个文件夹router,并在里面添加了一个index.js文件。而view文件夹则是存放需要跳转的页面,里面分别是代表首页的index.vue文件和内容页面content.vue,接下来看看5个文件各自有什么内容。

App.vue文件

html 复制代码
<script setup>
</script>

<template>
    <router-view></router-view>
</template>

<style scoped>

</style>

很简单,只是加了用于显示路由页面内容的<router-view></router-view>

main.js文件

html 复制代码
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")

这个文件中我引入了router文件夹中的index.js文件,并且使用了其中的router,那么下面来看看这个index.js文件的内容。

router/index.js文件

html 复制代码
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   // 导出供其他组件导入

在这个文件中我定义了一个路由配置和一个路由对象,并为其配置路由配置,最后导出该组件。

view/index.vue文件

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

这里我们用router-link来作为跳转的按钮(当然可以在外面再套一个button添加样式)

view/content.vue文件

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

这里我们用router-link来作为跳转的按钮(当然可以在外面再套一个button添加样式),和首页一样,这样点击后就可以实现跳转了

相关推荐
无双_Joney15 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥16 分钟前
前端必学的 CSS Grid 布局体系
前端·css
EMT16 分钟前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare18 分钟前
选择文件夹路径
前端
艾小码18 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月19 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁22 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅23 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸24 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端