vue3 集成 router路由

https://blog.csdn.net/u012961419/article/details/124300035

 

# 安装 npm install vue-router@4

 

创建路由配置文件：

<!-- src\views\home\index.vue -->
<template>
  <div>
    首页
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

<!-- src\views\login\index.vue -->
<template>
  <div>
    登录
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
</style>

<!-- src\App.vue -->
<template>
  <router-view />
</template>

<script setup lang="ts">
</script>

 

// src\router\index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes:RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/home/index.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/index.vue')
  }
]

const router = createRouter({
  // history: createWebHashHistory(), // hash 路由模式
  history: createWebHistory(), // history 路由模式
  routes // 路由规则
})

export default router

// src\main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App)
  .use(router)
  .mount('#app')