如何使用vue路由器添加表单部分HTMl？

npm install vue
npm install vue-router

<!-- 表单组件 -->
<template>
  <div>
    <form>
      <!-- 表单内容 -->
    </form>
  </div>
</template>

<script>
export default {
  name: 'FormComponent',
  // 组件逻辑
}
</script>

<!-- 路由定义 -->
<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
import FormComponent from './components/FormComponent.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/form',
    component: FormComponent
  }
]

const router = new VueRouter({
  routes
})

export default router
</script>

<!-- 主入口文件 -->
<script>
import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

<!-- Vue模板 -->
<template>
  <div>
    <router-link to="/form">表单</router-link>
    <router-view></router-view>
  </div>
</template>