安装vue 路由：　npm i vue-router

第一步：创建路由：

router 目录下面创建　index.tx 文件：

在vue3中　必须引入　路由器工作模式：createWebHistory

注意一：　在App.vue 中加载模板：在导航区加链接是：　RouterLink to

<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="xiaozhupeiqi">首页</RouterLink>
      <RouterLink to="/news" active-class="xiaozhupeiqi">新闻</RouterLink>
      <RouterLink to="/about" active-class="xiaozhupeiqi">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

注意在：App.vue 中引入路由器视图

<!-- 展示区 -->

<div class="main-content">

<RouterView></RouterView>

</div>

<script lang="ts" setup name="App">

import {RouterView,RouterLink} from 'vue-router'

</script>

// 创建一个路由器，并暴露出去

// 第一步：引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
// 引入一个一个可能要呈现组件
import Home from '@/components/Home.vue'　　　　// 引入指定的文件组件
import News from '@/components/News.vue'
import About from '@/components/About.vue'

// 第二步：创建路由器
const router = createRouter({
  history:createWebHistory(), //路由器的工作模式（稍后讲解）
  routes:[ //一个一个的路由规则
    {
      path:'/home',　　// 路径
      component:Home
    },
    {
      path:'/news',
      component:News
    },
    {
      path:'/about',
      component:About
    },
  ]
})

// 暴露出去router
export default router

main.ts 的引入：

// 引入createApp用于创建应用
import {createApp} from 'vue'
// 引入App根组件
import App from './App.vue'
// 引入路由器
import router from './router'

// 创建一个应用
const app = createApp(App)
// 使用路由器
app.use(router)
// 挂载整个应用到app容器中
app.mount('#app')