做心灵鸡汤网站栏目排版百度招商客服电话
有需求是在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文件
<script setup>
</script><template><router-view></router-view>
</template><style scoped></style>
很简单,只是加了用于显示路由页面内容的<router-view></router-view>
main.js文件
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文件
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文件
<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文件
<template>
<div class="container"><li><router-link to="/">首页</router-link></li><li><router-link to="/content">内容页面</router-link></li>
</div>
</template>
这里我们用router-link来作为跳转的按钮(当然可以在外面再套一个button添加样式),和首页一样,这样点击后就可以实现跳转了