vue简单点击按钮跳转页面
时间: 2023-07-26 22:46:23 浏览: 48
在 Vue 中,可以使用 `vue-router` 来实现页面之间的跳转。以下是一个简单的示例:
1. 首先,需要安装 `vue-router`:
```
npm install vue-router
```
2. 在 `main.js` 中导入和使用 `vue-router`:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
```
3. 在组件中使用 `router-link` 和 `router-view`:
```vue
<template>
<div>
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
```
4. 点击 `router-link` 可以跳转到对应的页面。
注意:`/home` 和 `/about` 是路由的路径,需要在 `VueRouter` 的配置中进行定义,`Home` 和 `About` 是对应的组件。