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 = falsenew 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模式。
