vue怎么实现页面跳转
时间: 2023-04-05 08:01:21 浏览: 129
在 Vue 中,可以使用 vue-router 插件来实现页面跳转。首先需要在 main.js 文件中引入 vue-router 并配置好路由。然后在组件中使用 <router-link> 标签或者 this.$router.push() 方法来实现页面跳转。
示例:
1.main.js 中引入并配置路由
```
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
```
2.使用 <router-link> 标签在页面中实现页面跳转
```
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
</template>
```
3.使用 this.$router.push() 方法在组件中实现页面跳转
```
<template>
<div>
<button @click="goHome">Home</button>
</div>
</template>
<script>
export default {
methods: {
goHome() {
this.$router.push('/')
}
}
}
</script>
```
阅读全文