路由的作用及使用

一、什么是路由器？

路由器（Router）是一种网络设备，它负责在计算机网络之间接收、解释数据包，并将这些数据包有效地从一个网络传送到另一个网络。

二、路由的发展历程

路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：

（1）后端路由阶段；

（2）前后端分离阶段；

（3）单页面富应用（SPA）；

三、路由它基本使用的方法及步骤

（1）安装vue-router插件；

（2）在src目录下创建router目录,再在router目录下创建一个index.js(该文件用于创建整个应用的路由器)；

（3）在main.js文件中使用vue-router；

（4）在router目录下的index.js文件创建路由器对象,并进行相关的路由规则的设置；

（5）编写组件；

（6）编写App.vue；

（7）使用router-link替换App.vue中的<a>标签；

（8）使用router-view替换组件内容展示区；

（9）测试

四、嵌套路由的作用以及它的使用场景

嵌套路由（Nested Routing）或称为子路由，是在路由器或路由系统中使用的一种设计模式，它允许在一个路由内部定义更多的路由，主要用于以下作用：

1. 组织和管理：随着应用程序或网络规模的增大，路由的数量也会随之增加。嵌套路由可以帮助开发者更好地组织和管理这些路由，使得结构更加清晰，便于维护。

2. 模块化：通过嵌套路由，可以将相关的路由分组到一起，形成模块。每个模块可以独立处理自己的路由逻辑，这样有助于代码的模块化和重用。

3. 路径前缀：嵌套路由允许共用路径前缀。例如，在一个博客系统中，所有与文章相关的路由都可以嵌套在/articles路径下，如/articles/:id, /articles/new等。

4. 权限控制：嵌套路由可以用于实现细粒度的权限控制。例如，可以定义一个路由组，该组内的所有路由都需要特定的权限才能访问。

5. 视图组件共享：在某些框架中，嵌套路由可以使得子路由共享父路由的视图组件或布局，减少重复代码的编写。

6. URL结构优化：嵌套路由有助于构建有意义的URL结构，这对于搜索引擎优化（SEO）和用户体验（UX）都是有益的。

7. 路由守卫：在嵌套路由中，可以定义路由守卫（如登录验证），这些守卫会应用到所有的子路由上，而不需要为每个子路由单独设置。

以下是一些具体的应用场景：

• Web应用程序：在单页应用程序（SPA）中，嵌套路由常用于前端框架（如React Router, Vue Router, Angular Router）来管理不同组件的渲染。
• API端点：在构建RESTful API时，嵌套路由可以用来管理不同资源（如用户、订单、产品）的端点。
• 网络架构：在大型网络中，嵌套路由可以用于实现复杂的路由策略，如多级网络或多租户环境中的路由隔离。

总之，嵌套路由提供了一种结构化和层次化的方法来管理路由，使得应用程序和网络的设计更加灵活和可维护。

五、懒加载的作用及使用场景

懒加载（Lazy Loading）是一种优化资源管理和提升用户体验的技术，它在不同的应用场景中有不同的作用，以下是一些主要的好处：

1. 提高页面加载速度：

   • 减少初始加载时间：懒加载允许网页或应用程序在初始加载时只加载必要的资源，而将非关键资源（如图片、视频、脚本等）延迟到需要时再加载。
   • 减少资源请求：减少初次加载时的并发请求数量，可以避免网络拥塞，提高页面加载效率。

2. 节省带宽：

   • 对于用户来说，懒加载可以减少不必要的数据传输，节省流量。
   • 对于服务器来说，懒加载可以减少服务器的负载，因为只有当用户实际需要时才发送资源。

3. 提升用户体验：

   • 更快的内容展现：用户可以更快地看到页面的主要内容，而不必等待所有资源都加载完毕。
   • 更流畅的滚动：在滚动长页面时，懒加载可以确保只有进入视窗的资源才会被加载，从而提供更流畅的滚动体验。

4. 提高资源利用率：

   • 懒加载可以确保只有当用户有可能与之交互时，资源才会被加载，从而避免浪费资源。

5. 优化内存使用：

   • 在应用程序中，懒加载可以用于按需加载组件或模块，这样可以减少应用程序的内存占用。

6. 适应不同设备：

   • 在移动设备上，懒加载尤为重要，因为移动网络的带宽通常比宽带网络要有限。

懒加载的应用场景包括：

• 网页开发：对于含有大量图片的网页，如电子商务网站或图库，懒加载可以显著提高性能。
• 单页应用程序（SPA）：在SPA中，懒加载可以用于按需加载路由对应的视图和组件。
• 移动应用程序：在移动应用中，懒加载可以用于按需加载屏幕或功能模块，减少应用的初始下载大小。

总之，懒加载是一种有效的性能优化手段，它通过按需加载资源，帮助开发者构建更快、更流畅、更节省资源的网页和应用。

六、动态路由的简介

动态路由（Dynamic Routing）是一种网络路由方法，它允许路由器根据网络的当前状态或变化自动调整路由决策。以下是动态路由的使用及作用：

使用：

1. 路由协议：

   • 动态路由通常依赖于路由协议，如RIP（路由信息协议）、OSPF（开放最短路径优先）、BGP（边界网关协议）等。
   • 路由器通过这些协议相互通信，共享网络拓扑和路由信息。

2. 配置：

   • 在路由器上配置动态路由，需要启用相应的路由协议，并设置一些参数，如路由 metric、邻居、更新间隔等。

3. 网络变化：

   • 当网络拓扑发生变化（如链路故障、新路由器加入等）时，动态路由能够自动重新计算最佳路径。

作用：

1. 自动化：

   • 动态路由自动发现网络中的路由信息，无需手动配置静态路由。

2. 灵活性：

   • 网络变化时，动态路由能够快速适应，重新选择最佳路径，而静态路由需要管理员手动干预。

3. 可扩展性：

   • 动态路由特别适用于大型和复杂网络，因为它们可以自动处理大量的路由信息。

4. 容错性：

   • 当某条路径不可用时，动态路由可以自动找到替代路径，提高网络的可靠性。

5. 优化路径：

   • 动态路由协议可以根据预定义的metric（如跳数、带宽、延迟等）来选择最佳路径。

6. 减少管理开销：

   • 由于路由信息是自动更新的，因此减少了网络管理员的工作量。

7. 负载均衡：

   • 某些动态路由协议支持负载均衡，可以在多个等价路径上分配流量。

应用场景：

• 企业网络：在企业内部网络中，动态路由可以帮助实现不同部门网络之间的有效通信。
• 互联网服务提供商（ISP）：ISP网络通常使用动态路由来管理大量的路由信息，并确保数据包能够高效地跨越互联网。
• 数据中心：在数据中心，动态路由用于确保不同服务器和存储设备之间的可靠连接。

动态路由是现代网络中不可或缺的一部分，它通过提供自动化、灵活性和可扩展性，帮助网络管理员维护稳定和高效的网络环境。然而，它也需要更多的计算资源，并可能引入一定的复杂性，因此在使用时需要仔细规划和配置。

七、举例

First.vue

<template lang="">
    <div>
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <p>性别：{{sex}}</p>
        <router-link to="/first/ad">ad</router-link>
        <!--子级路由展示区域-->
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name:'First',
    data(){
        return{
            name:'小华',
            age:20,
            sex:'女'
        }
    },
    mounted(){
        console.log(this.$router);
        console.log(this.$route);
    }
};
</script>
<style lang="">
    
</style>

Computer.vue

<template lang="">
    <div>
        <h1>电影页</h1>
    </div>
</template>
<script>
import router from '@/router';

export default {
    name:'Computer',
    data(){
        return{

        };
    },
    mounted(){
        console.log(this.$router);
        console.log(this.$route);
    }
}
</script>
<style lang="">
    
</style>

App6.vue

<template>
    <nav class="nav">
        <ul class="nav">
            <!-- <li class="active"><a href="#">首页</a>
            </li>
            <li><a href="#">电影页</a></li> -->
            <li>
        <router-link replace  active-class="active" to="/first">首页</router-link>|
        <router-link to="/computer">电影页</router-link>
      </li>
        </ul>
    </nav>
    <div style="margin-top: 60px;">
        <!--组件内容展示区域-->
        <router-view></router-view>
    </div>
</template>
<script>
import First from './view/First.vue';
import Computer from './view/Computer.vue';
// import HelloWorld from './components/HelloWorld.vue';
export default {
    name:'App',
    data(){
        return{

        };
    },
    components:{
        First,
        Computer,
    },
};
</script>
<style scoped>
    li{
        list-style-type: none;
    }
    .nav{
        height:50px;
        line-height:50px;
        /* background-color:#999; */
    }
    .nav ul{
        display: flex;
    }
    .nav ul li{
        margin-right: 20px;
        display: flex;
    }
    .active{
        /* background-color: skyblue; */
        padding: 0px 10px;
        color: #FFF;
    }
</style>
<!-- <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style> -->

index.js

//引入函数
import { createRouter,createWebHistory } from "vue-router"
//引入组件
import Home from '../view/Home.vue'
import About from '../view/About.vue'
const routes= [
    //配置路由规则
    {
        path:'/home',
        component:Home
    },
    {
        path:'/about',
        component:About
    },
    {
        path:'/user/:id',
        component:()=>import('../components/User.vue'),
        name:'user',
        props:true  //id的值可以作为
    },
    {
        //404
        path:'/:pathMatch(.*)',
        component:()=>import('../components/NotFount.vue')
    },
    {
        path:'/ad',
        component:()=>import('../view/HomeAd.vue'),
        name:'ad'
    },
    {
        path:'product',
        component:()=>import('../view/HomeProduct.vue'),
        name:'product'
    },
    {
        path:'/login',
        component:()=>import('../view/Login.vue'),
        name:'login'
    },
    {
        path:'/first',
        component:()=>import('../chapter01/First.vue'),
        name:'first'
    },
    {
        path:'/computer',
        component:()=>import('../chapter01/Computer.vue'),
        name:'computer'
    }
]
//2、创建路由器实例并传递'router'配置
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    //一组路由规则设置到路由器对象中
    routes:routes
})
//3、导出router路由对象
export default router

main.js

import { createApp } from 'vue'
import App6 from './App6.vue'

 
//引入vue-router
import router from './router/index'
//使用vueRouter路由器对象
createApp(App6).use(router).mount('#app')