在 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.使用 标签在页面中实现页面跳转 文章来源:https://www.toymoban.com/news/detail-607557.html
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
</template>
3.使用 this.$router.push() 方法在组件中实现页面跳转文章来源地址https://www.toymoban.com/news/detail-607557.html
<template>
<div>
<button @click="goHome">Home</button>
</div>
</template>
<script>
export default {
methods: {
goHome() {
this.$router.push('/')
}
}
}
</script>
到了这里,关于vue怎么实现页面跳转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!