html跳转vue页面

要在 HTML 中跳转到 Vue 页面，需要先在 Vue 中创建一个路由，然后在 HTML 中使用链接来触发路由跳转。

1. 在 Vue 中创建路由

在 Vue 中创建路由需要使用 Vue Router。首先安装 Vue Router：

npm install vue-router

然后在 Vue 实例中创建一个路由：

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

Vue.use(VueRouter)

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

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

这里我们创建了两个路由：一个是根路径 `/`，对应的组件是 `Home`；另一个是路径 `/about`，对应的组件是 `About`。

2. 在 HTML 中使用链接触发路由跳转

在 HTML 中，我们可以使用 `<a>` 标签来创建链接，通过设置 `href` 属性来指定要跳转的路由路径。例如：

<a href="/about">About</a>

这样点击链接时，就会跳转到 `/about` 路径对应的路由。

注意，这里的跳转是 SPA 单页应用的路由跳转，不会触发浏览器的页面刷新，只会切换 Vue 组件的显示。如果需要在跳转时刷新页面，需要使用 `location.href` 或者 `window.location` 等原生 JavaScript 方法。