Vue3从入门到实战：快速上手路由器

缺乏、安全感 2024-04-26 01:44 88阅读 0赞

本人在B站上关于vue3的尚硅谷的课程，以下是整理一些笔记。

###  ###

### 一.路由器和路由的概念 ###

在 Vue 3 中，路由（Router）和路由器（Router）是两个相关但不同的概念。

**1. 路由（Router）：**  
路由是指定义在 Vue 应用程序中的不同页面或视图之间的映射关系。每个路由对应着一个特定的 URL，当用户在应用程序中导航到不同的 URL 时，路由会告诉 Vue 哪个组件应该渲染到页面上。路由定义了应用程序的不同页面状态和导航逻辑。

**2. 路由器（Router）：**  
路由器是一个 Vue 插件，它提供了在应用程序中使用路由的功能。Vue Router 是 Vue 官方提供的路由器实现，它允许你在 Vue 应用程序中构建 SPA（单页应用程序）并进行客户端路由。路由器负责解析 URL，根据路由配置将不同的组件渲染到正确的位置，并处理应用程序的导航。

**通俗点解释：**

**路由器就像是一个导航系统，负责根据不同的网址告诉网站要显示哪个页面。它会监听浏览器的地址栏变化，一旦检测到地址发生改变，就会根据配置的路由规则找到对应的页面，并将其渲染到浏览器中。**

总结来说，路由就是网站的不同页面，而路由器就是负责管理这些页面的工具。路由器根据地址栏中的网址来确定要显示的页面，并确保正确地加载和切换页面内容。

![b229746e2cb84a0fb49dd7e88c0fd277.png][]

（该图来源尚硅谷）

一个路由器有多个路由：

（下图只是举例子解释，不是这种路由器）

![ffb61a0dfba141cdb4c3ba6fbf4cf46e.png][]

### 二.制定导航区，展示区。 ###

**1.在src文件中定义components文件夹**

**2.在此文件夹定义三个组件：About.vue，Home.vue,News.vue**

Header.vue只是起一个标题的作用，没有也可以。

![a354e9651eeb4ead8c7410ad827039e7.png][]

**以下是组件的源码：**

**About.vue**

<template>
        <div class="about">
          <h2>大家好，欢迎来到小李同学的博客</h2>
        </div>
      </template>
      
      <script setup lang="ts" name="About">
        import {onMounted,onUnmounted} from 'vue'
      
        onMounted(()=>{
          console.log('About组件挂载了')
        })
        onUnmounted(()=>{
          console.log('About组件卸载了')
        })
      </script>
      
      <style scoped>
      .about {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        color: rgb(85, 84, 84);
        font-size: 18px;
      }
      </style>

--------------------

Home.vue

<template>
        <div class="home">
          <img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
        </div>
      </template>
      
      <script setup lang="ts" name="Home">
      
      </script>
      
      <style scoped>
        .home {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
        }
      </style>

--------------------

News.vue

<template>
        <div class="news">
          <ul>
            <li><a href="#">新闻001</a></li>
            <li><a href="#">新闻002</a></li>
            <li><a href="#">新闻003</a></li>
            <li><a href="#">新闻004</a></li>
          </ul>
        </div>
      </template>
      
      <script setup lang="ts" name="News">
        
      </script>
      
      <style scoped>
      /* 新闻 */
      .news {
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        height: 100%;
      }
      .news ul {
        margin-top: 30px;
        list-style: none;
        padding-left: 10px;
      }
      .news li>a {
        font-size: 18px;
        line-height: 40px;
        text-decoration: none;
        color: #64967E;
        text-shadow: 0 0 1px rgb(0, 84, 0);
      }
      .news-content {
        width: 70%;
        height: 90%;
        border: 1px solid;
        margin-top: 20px;
        border-radius: 10px;
      }
      </style>

--------------------

**Header.vue**

<template>
        <h2 class="title">Vue路由测试</h2>
      </template>
      
      <script setup lang="ts" name="Header">
        
      </script>
      
      <style scoped>
        .title {
          text-align: center;
          word-spacing: 5px;
          margin: 30px 0;
          height: 70px;
          line-height: 70px;
          background-image: linear-gradient(45deg, gray, white);
          border-radius: 10px;
          box-shadow: 0 0 2px;
          font-size: 30px;
        }
      </style>

--------------------

### 三.制定路由器 ###

**1.在src文件中新建好router（路由器）文件夹**

**2.在文件夹中建立index.ts文件**

**3.在index.ts文件里面制定路由规则**

![c7fabaab08014438a5bc70db8c8bbfa2.png][]

**index.ts**

//创建一个路由器并暴露出去
    
    //第一步：引入creatRouter
    import{createRouter,createWebHistory} from'vue-router'
    //引入一个一个可能要呈现的组件
    import Home from '@/components/Home.vue'
    import About from '@/components/About.vue'
    import News from '@/components/News.vue'
    
    
    
    //第二步：创建路由器
    
    const router = createRouter({
        history:createWebHistory(),//路由器的工作模式
        routes:[//一个个的路由规则 
            {
                 path:'/home',
                 component:Home
            },
            {
                path:'/about',
                component:About
           },
           {
                 path:'/news',
                 component:News
            },
    
        ]
    })
    
    export default router//定义好后暴露出去router

**`createRouter:`**

>  **Vue Router 提供的一个函数，用于创建路由器实例。**

createWebHistory：

> **`createWebHistory` 是一个用于创建基于 HTML5 History 模式的路由历史记录管理器的函数，它在 Vue Router 中用于配置路由器的工作模式。**

**代码解析：**

1.  引入了 `createRouter` 和 `createWebHistory` 方法，这两个方法是从 `vue-router` 包中导入的。这些方法将用于创建路由器实例和指定路由器的工作模式。
2.  引入要呈现的组件，包括 `Home`、`About` 和 `News` 组件。这些组件将在不同的路由下进行渲染。
3.  使用 `createRouter` 方法创建了一个路由器实例，并传入了一个配置对象作为参数。配置对象中的 `history` 属性使用了 `createWebHistory()`
4.  在配置对象的 `routes` 属性中，定义一系列的路由规则。每个路由规则都是一个对象，包含了 `path` 和 `component` 属性。`path` 表示要匹配的 URL 路径，`component` 表示该路由对应的组件。
5.  最后，**通过 `export default router` 将定义好的路由器实例暴露出去**，以便在其他地方使用。（一定要暴露，否则等于没写）

### 四.路由器在App.vue组件中使用 ###

<template>
       <div class = 'app'>
          
          <Header/>
          
          <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'>
                <RouterView></RouterView>
          </div>
       </div>
      
    </template>
    
    <script lang="ts" setup name = "App">
    
    import { RouterView,RouterLink} from 'vue-router'; 
    import Header from './components/Header.vue'
    
    </script>
    <style>
        /* App */
      .navigate {
        display: flex;
        justify-content: space-around;
        margin: 0 100px;
      }
      
      .navigate a {
        display: block;
        text-align: center;
        width: 90px;
        height: 40px;
        line-height: 40px;
        border-radius: 10px;
        background-color: gray;
        text-decoration: none;
        color: white;
        font-size: 18px;
        letter-spacing: 5px;
      }
      .navigate a.active {
        background-color: #64967E;
        color: #ffc268;
        font-weight: 900;
        text-shadow: 0 0 1px black;
        font-family: 微软雅黑;
      }
      .main-content {
        margin: 0 auto;
        margin-top: 30px;
        border-radius: 10px;
        width: 90%;
        height: 400px;
        border: 1px solid;
      }
    </style>

**`<RouterView>：`**

> 组件是 Vue Router 提供的一个用于动态渲染路由组件的组件。
> 
> 例如，当路由路径为 `/home` 时，路由器配置中定义的路由规则，将 `Home` 组件渲染到 `<div class="main-content">` 内部。同样的，当路由路径为 `/news` 时，会渲染 `News` 组件，当路由路径为 `/about` 时，会渲染 `About` 组件。

**active-class：**

> 通过 `<RouterLink>`，你可以在应用程序中创建导航链接，使用户能够点击链接并导航到不同的路由。

**代码解析：**

<template>标签用于定义组件的结构部分，也就是 HTML 部分。在这个例子中，<template> 中包含了整个组件的结构，包括一个 div 元素作为根容器，其中包含了一个名为 Header 的组件、导航区域和展示区域。

### 五.展示路由 ###

在导航区点击首页，路由器会找到/home的路由，并把它渲染到展示区。

![21b5e9226b804c7db58afc7626bc2802.png][]

在导航区点击新闻，路由器会找到/news的路由，并把它渲染到展示区。

![754a0dfab02a4a0fa8664f0f1782687a.png][] 在导航区点击关于，路由器会找到/about的路由，并把它渲染到展示区。

![97e2f4ab152f42e1adcf9157fbeec4df.png][]

[b229746e2cb84a0fb49dd7e88c0fd277.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/d6037d8cd87749eabc1aecd98c49bc72.png
[ffb61a0dfba141cdb4c3ba6fbf4cf46e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/43c352ae3afc46e4941409c8cf24e745.png
[a354e9651eeb4ead8c7410ad827039e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/12404b9bbf1244c3b4d23ac582f6cff9.png
[c7fabaab08014438a5bc70db8c8bbfa2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/617c4f8b8a4d4e37857120e36abfc9f1.png
[21b5e9226b804c7db58afc7626bc2802.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/79abaa7eca214b068e87952a668a81aa.png
[754a0dfab02a4a0fa8664f0f1782687a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/fa1de137f3984a5b809daa9a2629de30.png
[97e2f4ab152f42e1adcf9157fbeec4df.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8a39ff7cf7864feeb9ffe6995d40f425.png