如何在html中实现Vue路由案列

要在HTML中实现Vue路由，需要先使用Vue CLI创建一个基于Vue的项目，然后安装Vue Router。以下是基本的步骤：

1. 创建Vue项目

使用Vue CLI创建一个Vue项目，打开终端并输入以下命令：

vue create my-project

其中，my-project是项目名称。根据提示选择需要的特性和插件。

2. 安装Vue Router

在Vue项目中，可以使用Vue Router来管理页面路由。在终端中输入以下命令来安装Vue Router：

npm install vue-router

3. 创建路由

在src目录下创建一个router.js文件，并编写路由配置，如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

在上面的示例中，我们定义了两个路由，一个是根路由'/'，一个是/about。每个路由都对应了一个组件，分别是Home和About。

4. 将路由添加到Vue实例

在main.js文件中，将路由添加到Vue实例中，如下所示：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

在上面的代码中，我们将router添加到Vue实例中。

5. 创建组件

在src/views目录下创建Home.vue和About.vue组件，对应路由定义中的Home和About组件。

6. 在模板中使用路由

在App.vue模板中，使用<router-view>标签来显示当前路由所对应的组件，如下所示：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

现在，你可以运行npm run serve命令，在浏览器中访问http://localhost:8080/，就可以看到Home组件了。在地址栏输入http://localhost:8080/about，即可访问About组件。