html页面跳转到vue文件

要将 HTML 页面跳转到 Vue 文件，您需要使用 Vue Router。Vue Router 是 Vue.js 的官方路由管理器，它可以将多个 Vue 组件映射到对应的 URL。

以下是一个简单的例子，其中我们使用 Vue Router 将 HTML 页面跳转到 Vue 组件：

1. 安装 Vue Router：

   npm install vue-router --save

2. 创建一个 Vue 组件：

   // HelloWorld.vue
   
   <template>
     <div>
       <h1>Hello World</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'HelloWorld'
   }
   </script>

3. 创建一个路由：

   // routes.js
   
   import HelloWorld from './components/HelloWorld.vue'
   
   export default [
     {
       path: '/',
       name: 'HelloWorld',
       component: HelloWorld
     }
   ]

4. 在 HTML 页面中引入 Vue 和 Vue Router：

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

5. 创建一个 Vue 实例，并将路由添加到实例中：

   // main.js
   
   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import routes from './routes'
   
   Vue.use(VueRouter)
   
   const router = new VueRouter({
     routes
   })
   
   new Vue({
     el: '#app',
     router
   })

6. 在 HTML 页面中添加一个容器元素，并为其设置 ID：

   <div id="app"></div>

7. 在 HTML 页面中添加一个链接，用于触发路由：

   <a href="#/">Hello World</a>

当用户单击链接时，路由会将页面跳转到 Vue 组件。在本例中，我们将用户重定向到名为 HelloWorld 的组件。