点击按钮创建vue页面 vue点击按钮打开新页面

点击按钮创建Vue页面需要使用Vue的路由功能。Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，可以快速构建单页面应用。下面是创建Vue页面的步骤：

我们需要在项目中安装 Vue Router。在命令行中运行以下命令：

npm install vue-router

接下来，在项目的入口文件（一般是 main.js）中引入 Vue Router，并使用 Vue.use() 方法来安装它：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

然后，我们需要创建一个 VueRouter 实例，并配置路由。在路由配置中，我们可以定义多个路由，每个路由都对应一个页面组件。当用户点击按钮时，我们可以通过路由跳转到对应的页面。

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]
const router = new VueRouter({
  routes
})

在上面的代码中，我们定义了两个路由，一个是根路径 '/' 对应的组件是 Home，另一个是 '/about' 对应的组件是 About。

我们需要在 Vue 实例中挂载路由。在创建 Vue 实例时，将 router 对象传入即可：

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

现在，我们已经完成了点击按钮创建Vue页面的基本配置。接下来，我们可以在组件中使用 `<router-link>` 标签来创建按钮，并通过 to 属性指定要跳转的路径。当用户点击按钮时，Vue Router 会自动跳转到对应的页面。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

在上面的代码中，我们创建了两个按钮，分别对应根路径和 '/about' 路径。当用户点击按钮时，会跳转到对应的页面。

除了 `<router-link>` 标签，我们还可以使用编程式导航来实现页面跳转。Vue Router 提供了 `$router` 对象，可以通过调用其 `push()` 方法来实现跳转。

methods: {
  goToAboutPage() {
    this.$router.push('/about')
  }
}

在上面的代码中，我们定义了一个方法 `goToAboutPage()`，当用户点击按钮时，会调用该方法来跳转到 '/about' 页面。

总结一下，点击按钮创建Vue页面的步骤如下：安装 Vue Router、引入 Vue Router、配置路由、挂载路由、使用 `<router-link>` 标签或编程式导航来实现页面跳转。通过这些步骤，我们可以方便地实现点击按钮创建Vue页面的功能。