vue点击按钮实现页面跳转

1.安装vue-router：

npm install vue-router

2.在main.js中引入并使用vue-router：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({router,render: h => h(App),
}).$mount('#app')

3.在src目录下创建router.js文件，并配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(VueRouter)
const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
]
const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})
export default router

4.在App.vue中使用router-link组件实现页面跳转：

<template><div id="app"><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><router-view/></div>
</template>在上面的代码中，我们使用了router-link组件来实现页面跳转，to属性定义了跳转的路径，
点击后会自动引导vue-router进行路由跳转。同时，在App.vue中使用了router-view组件来显示当前路由对应的组件内容。

5.在views目录下创建Home.vue和About.vue组件，用于展示不同的页面内容。

<template><div><h1>Home Page</h1></div>
</template>至此，我们就完成了一个简单的vue-router页面跳转的示例。需要注意的是，这里使用了history模式进行路由跳转，
这意味着我们需要配置服务器，以便在浏览器中刷新页面时不会出现404错误。如果不需要使用history模式，
可以将router.js中的mode属性改为hash模式。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！