vue路由基本结构

【router.ts】
-- 路由配置
import { createRouter,createWebHistory } from "vue-router";

createRouter({
    history:createWebHistory(),
    routes:[
        {
            path: '',
            component: ''

        }
    ]
})
export default router

【main.ts】
--- 使用配置
import router from './router/index'
app.use(router)
app.mount('#app')

【app.vue】
-- 导航区(routerLink) 及 展示区(router-view)
<template>

  <div class="app">
    <!-- 导航区 -->
    <div class="navigate">
      <routerLink to="/home" active-class="active">首页</routerLink>
      <routerLink to="/news" active-class="active">新闻</routerLink>
      <routerLink to="/about" active-class="active">关于</routerLink>
    </div>

    <!-- 展示区 -->
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>

</template>