在 Vue 中,可以使用 vue-router 插件来实现页面跳转。首先需要在 main.js 文件中引入 vue-router 并配置好路由。然后在组件中使用 标签或者 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.使用 标签在页面中实现页面跳转

<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>
Logo

前往低代码交流专区

更多推荐