概念

1.一组key-value的对应关系

2.路由个数多，需要路由器去管理路由。

流程

  • 导航区、展示区
  • 路由器
  • 配置规则
  • 组件

路由安装

npm i vue-router

路由使用

  1. 根文件夹下创建router文件夹。
  2. 创建index.ts文件。
  3. 在index.ts文件编写路由规则。
  4. 在main.ts中引入路由使用路由。
  5. 在App.vue中写路由标签。

index.ts

//创建一个路由器并暴露

// 引入路由组件
import { createRouter,createWebHistory } from 'vue-router'

// 引入组件
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import PersonManage from '@/components/PersonManage.vue'

// 创建路由
const router = createRouter({
    history:createWebHistory(), // 路由模式
    routes:[ // 路由规则
        {
            path:'/',
            component:Home
        },
        {
            path:'/pm',
            component:PersonManage
        },
        {
            path:'/about',
            component:About
        }
    ]
})

// 暴露路由
export default router

main.ts

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

//创建应用
const app = createApp(App);
//app.use(router);
app.use(router);
//挂载应用
app.mount("#app");

App.vue

<template>
    <div class="div1">
        <h1>Vue路由测试</h1>
        <!--导航区-->
        <div class="nav-class">
            <RouterLink to="/" >首页</RouterLink>|
            <RouterLink to="/pm" >人员管理</RouterLink>|
            <RouterLink to="/about" >关于我们</RouterLink>|//或者 :to={path:"/about"}
        </div>
        
        <!-- 内容区-->
        <div class="content-class">
            <RouterView/>
        </div>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'App', // 组件名
        components: {  }
    }
</script>
<script setup lang="ts"> 
    import { RouterView } from 'vue-router';
</script>

<style scoped>
    .nav-class{
        background-color: rgb(241, 225, 225);
        padding: 10px;
        text-align: center;
    }
    .content-class{
        background-color: rgb(241, 223, 223);
        padding: 10px;
        margin-top: 10px;
        height: 500px;
        text-align: center;
    }
    .div1{
        width: 500px;
        margin-left: 30%;
        height: 100%;
        background-color: aliceblue;
    }
    a{
        text-align: center;
    }
    h1 {
        color: rgb(201, 79, 79);
        background-color: antiquewhite;
        text-align: center;
    }
</style>

路由的好处：

​ 在当前界面只会有当前路由组件，其他组件会卸载。