vue 按钮跳转新页面_vuePress搭建一个vue风格的技术文档/博客

如果你想在 Vue 中实现按钮跳转到新页面，可以使用 Vue Router。首先，你需要安装 Vue Router：

npm install vue-router

接着，在你的 Vue 实例中引入 Vue Router 并注册路由：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/new-page',
    name: 'NewPage',
    component: () => import('@/views/NewPage.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

这里定义了一个路由，当访问 `/new-page` 时，会渲染 `NewPage.vue` 组件。

然后，在你的按钮组件中使用 `router-link` 标签：

<template>
  <router-link to="/new-page">跳转到新页面</router-link>
</template>

这样，点击按钮就会跳转到 `/new-page` 页面。

如果你想使用 VuePress 搭建一个 Vue 风格的技术文档/博客，可以参考 VuePress 官方文档中的教程：[VuePress](https://vuepress.vuejs.org/)。首先，你需要安装 VuePress：

npm install -D vuepress

然后，在你的项目中创建一个 `.vuepress` 目录，并在其中创建一个 `config.js` 文件：

module.exports = {
  title: 'My Blog',
  description: 'My awesome blog built with VuePress',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' },
      { text: 'About', link: '/about/' }
    ],
    sidebar: [
      '/',
      '/guide/',
      '/about/'
    ]
  }
}

这里定义了站点的标题、描述、导航栏和侧边栏。接着，在 `.vuepress` 目录中创建一个 `README.md` 文件作为首页，以及其他的 Markdown 文件作为文章。

最后，你可以使用以下命令启动 VuePress：

npx vuepress dev

这样，你就可以在浏览器中访问你的博客了。