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添加样式),和首页一样,这样点击后就可以实现跳转了

相关推荐
三小河11 分钟前
教你发布一个npm的组织包
前端
用户61204149221319 分钟前
使用JSP+Servlet+JavaBean做的课程后台管理系统
java·javascript·mysql
青椒a23 分钟前
002.nestjs后台管理项目-数据库之prisma(上)
前端
米诺zuo23 分钟前
react 中的useContext和Provider实践
前端·react.js
AnalogElectronic23 分钟前
vue3 实现贪吃蛇手机版01
开发语言·javascript·ecmascript
asdfsdgss24 分钟前
Angular CDK 自适应布局技巧:响应式工具实操手册
前端·javascript·angular.js
袁煦丞42 分钟前
【私人导航员+内网穿透神器】Sun-Panel × cpolar让NAS变身你的数字管家:cpolar内网穿透实验室第564个成功挑战
前端·程序员·远程工作
爱吃的强哥43 分钟前
Electron_Vue3 自定义系统托盘及退出二次确认
前端·javascript·electron
袁煦丞1 小时前
开启SSH后,你的NAS竟成私有云“变形金刚”:cpolar内网穿透实验室第645个成功挑战
前端·程序员·远程工作
IT_陈寒1 小时前
SpringBoot 3.2新特性实战:这5个隐藏功能让我开发效率提升50%
前端·人工智能·后端