vue按钮实现页面切换
使用 Vue Router 实现页面切换
在 Vue 项目中，可以通过 Vue Router 实现按钮点击切换页面的功能。Vue Router 是 Vue.js 官方的路由管理器，能够轻松实现单页面应用（SPA）的页面跳转。
安装 Vue Router：
npm install vue-router配置路由文件（通常在 src/router/index.js）：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router在 main.js 中引入路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')在组件中添加切换按钮
在 Vue 组件中，可以使用 <router-link> 或编程式导航实现页面切换。
使用 <router-link>：
<template>
<div>
<router-link to="/about">
<button>跳转到 About 页面</button>
</router-link>
</div>
</template>使用编程式导航：
<template>
<div>
<button @click="goToAbout">跳转到 About 页面</button>
</div>
</template>
<script>
export default {
methods: {
goToAbout() {
this.$router.push('/about')
}
}
}
</script>动态路由参数传递
如果需要传递参数，可以通过以下方式实现：
配置动态路由：
{
path: '/user/:id',
name: 'User',
component: User
}传递参数：
this.$router.push({ path: '/user/123' })
// 或
this.$router.push({ name: 'User', params: { id: '123' } })在目标页面接收参数：
this.$route.params.id路由导航守卫
可以使用导航守卫控制页面切换逻辑：
全局前置守卫：
router.beforeEach((to, from, next) => {
// 控制逻辑
next()
})组件内守卫：
export default {
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被确认前调用
next()
}
}通过以上方法，可以灵活实现 Vue 项目中按钮触发的页面切换功能，同时支持参数传递和路由控制。
