如何在html中定义vue-router组件？

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

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

<script>
  // 定义组件
  const Home = { template: '<div>这是首页组件</div>' }
  const About = { template: '<div>这是关于页面组件</div>' }

  // 定义路由
  const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]

  // 创建路由实例
  const router = new VueRouter({
    routes
  })

  // 创建Vue实例
  new Vue({
    el: '#app',
    router
  })
</script>