【Vue篇】详解router路由 | element-ui组件 | 嵌套路由

Dear 丶 2024-04-17 06:39 26阅读 0赞

> ?专栏【Vue】  
> ?喜欢的诗句：更喜岷山千里雪 三军过后尽开颜。  
> ?音乐分享【如愿】  
> ?欢迎并且感谢大家指出小吉的问题?

#### 文章目录 ####

*  ?Vue-Router介绍
 *  ?路由组成
 *  ?代码解释
 *   *  ⭐标签式路由
     *  ⭐编程式路由跳转
     *  ?自定义跳转到404界面
 *  ?嵌套路由
 *  ?element-ui组件
 *   *  ⭐代码解释
     *   *  ?优化

![在这里插入图片描述][b4ea44285b26458093ee6e32cef6fcce.png]

## ?Vue-Router介绍 ##

Vue Router是Vue.js官方提供的用于构建单页应用（SPA）的路由管理器。它能够集中处理应用程序中的路由跳转、参数传递、页面切换等功能，使得开发者可以轻松地实现前端路由功能。

Vue Router具有以下特点：

声明式路由配置：Vue Router使用声明式的方式配置路由，通过简单的配置项，可以定义页面路径、对应的组件以及其他相关信息。这种配置方式直观且易于维护。

嵌套路由：Vue Router支持嵌套路由，即一个路由下面可以包含多个子路由，从而实现更复杂的页面结构和组织方式。

动态路由匹配：Vue Router支持将动态参数添加到路由路径中，用于匹配不同的路由，从而实现根据不同参数渲染不同组件的功能。

导航守卫：Vue Router提供了多种导航守卫，例如beforeEach、beforeResolve和afterEach等，在路由跳转前、跳转过程中和跳转后执行相应的逻辑，可以用于进行权限验证、数据加载等操作。  
编程式路由跳转：除了可以通过声明式配置来实现路由跳转，Vue Router还支持编程式的方式进行路由跳转，通过调用路由实例上的方法来实现跳转，可以更灵活地在代码中控制导航逻辑。

总而言之，Vue Router是一个功能强大且易于使用的路由管理器，能够帮助开发者构建复杂的前端单页应用，管理页面之间的路由关系，实现良好的用户体验。

所谓的路由，就是根据不同的访问路径，对应不同的页面展示

> 使用路由需要安装 `npm install vue-router`  
> ![在这里插入图片描述][0594fafffa594d1cacc365d9e53b7067.png]

## ?路由组成 ##

![请添加图片描述][c723c46a8dff40b19f4c6263686c6b3c.jpeg]  
所谓路由请求，就是我们点击超链接后，会发出一个请求，这个请求会使页面发生变化，并且页面的路径也会对应发送变化  
![请添加图片描述][12efb2b164ed4bafb67c37fa16d45547.jpeg]

## ?代码解释 ##

我们创建好vue脚手架工程后(这一次我们要使用路由，使用要选择手动创建，并且勾选router这个选项)  
`具体创建过程就不演示了，需要的同学可以去了解一下 使用可视化工具创建vue脚手架 的方法`

### ⭐标签式路由 ###

标签式路由就是点击超链接，然后跳转到相应的界面

> 看main.js文件

![在这里插入图片描述][f6bd5b2e81a94c539c40c9a193e6b5c5.png]

> 我们看下一段代码

![在这里插入图片描述][ce1b63a8d57b43b89c5f08e2b443d822.png]

效果  
![在这里插入图片描述][6f8488b2f27d41b58a4eb96293b1219c.png]  
![在这里插入图片描述][8551862f9c66486d9345671f21f9e637.png]

### ⭐编程式路由跳转 ###

编程式路由跳转是通过编写代码来实现在Vue.js应用程序中进行路由跳转的方式，而不是通过用户的交互行为（例如点击链接或按钮）来触发路由跳转。  
![在这里插入图片描述][d9bc26df707e45868354e5686a93d611.png]

效果  
![在这里插入图片描述][757f901ed734416c81c8c11d5ca2c5c9.png]

我们点击按钮，也会发生跳转

![在这里插入图片描述][49140a6ec3044ab6a19a2ca7c101158a.png]

### ?自定义跳转到404界面 ###

我们自己编写一个事件，点击按钮后，会自动跳转到一个界面中

> 新创建一个view  
> ![在这里插入图片描述][69e4146148714075a3f86f4cde93f587.png]

我们仿照上面编程式路由跳转的代码，我们创建Test超链接  
![在这里插入图片描述][315b94b321294f3fb2b6663605c44aa7.png]

编写router里面的代码  
![在这里插入图片描述][281220964b884a04af52298fd8abe82f.png]  
由于我们仅仅创建的Test超链接，没有创建这个实现这个超链接的路由地址，所以我们点击Test超链接，就会跳转到404界面  
![在这里插入图片描述][3d817226cb044637b30c05e13e486bf1.png]

## ?嵌套路由 ##

嵌套路由是指在Vue.js应用程序中，一个路由下面还可以包含子路由的一种路由配置方式。通过嵌套路由，您可以更好地组织和管理复杂的页面结构，使得页面之间的关系更加清晰和灵活。  
简而言之就是在一个界面内存在A和B两个区域，A区域切换内容，但是B区域不发生变化，或者B区域发生变化而A区域不变，或者二者都变化，这就是嵌套路由  
下面我们讲解一下具体用法，我们需要使用element-ui进行辅助

## ?element-ui组件 ##

> element-ui官网：https://element.eleme.cn/\#/zh-CN/component/installation

我们首先安装官网的方法安装element-ui

安装完成后，我们在main.js中加入下面的代码  
![在这里插入图片描述][66d27f603aea4054b7ce70b307eef0a0.png]

这样我们就可以全局使用element-ui了

> 下面我们看图片，在官网中找到相应的位置  
> ![在这里插入图片描述][fc4f4589fd8b40218b5aa3bbee33cfad.png]

复制得到下面的代码

<el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>

> 我们回到代码，在view文件夹下面再创建一个文件夹container，里面创建文件ContainerView.vue  
> ![在这里插入图片描述][2e13fc92216e4a4eaa0e4fb0d6949bc4.png]

把刚才复制的代码粘贴进去，在官网中找到< style >标签里面的代码，复制粘贴进去  
![在这里插入图片描述][06e99c553ed0483ab99473278f943894.png]

<template>
      <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
    </template>
    
    <script>
    export default{
          
    
    }
    </script>
    
    <style>
      .el-header, .el-footer {
          
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
      }
      
      .el-aside {
          
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
      }
      
      .el-main {
          
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
      }
      
      body > .el-container {
          
        margin-bottom: 40px;
      }
      
      .el-container:nth-child(5) .el-aside,
      .el-container:nth-child(6) .el-aside {
          
        line-height: 260px;
      }
      
      .el-container:nth-child(7) .el-aside {
          
        line-height: 320px;
      }
    </style>

> 然后我们回到index,js，编写嵌套路由

### ⭐代码解释 ###

![在这里插入图片描述][22ece384f8a648b0936fa3176114ffe3.png]

![在这里插入图片描述][909227ad9ac7461890ed4a33a9d51bdf.png]

> 下面我们创建多个视图  
> ![在这里插入图片描述][5953b587303c4bc190f636d33f60f23d.png]

其中修改其中的内容如下图  
![在这里插入图片描述][535312918b594354ae37e3ed3ddd6053.png]  
其他的同理

我们回到index.js中，来编写嵌套路由代码  
![在这里插入图片描述][102a0f4b40f14253bc1121ab1f819616.png]

下面我们在布局容器视图中添加< router-view >，实现子视图组件展示  
![在这里插入图片描述][51544c55b83447eb8a153966afdaae07.png]  
在布局容器视图中添加< router-link >，实现路由请求  
![在这里插入图片描述][1524c9b266d044f094a76f687d125c8e.png]

![在这里插入图片描述][5f28951be67842a9a97427a3a0fc739f.png]  
![在这里插入图片描述][62555d8b61fc4561976cf04956ca2ed8.png]

#### ?优化 ####

我们发现，如果我们不点击超链接，而是直接访问/c，界面中的子视图区域什么都没有  
![在这里插入图片描述][7e75c238d59a485da0d99686a0688eac.png]

那么我们应该怎么修改代码，来解决这个问题呢

`我们可以用redirect来解决`

![在这里插入图片描述][8c56a981bd9d4fb88de62591cdf850bf.png]  
这样我们一打开界面就会直达p1界面  
![在这里插入图片描述][b4dfb334b1f4423ca578fa00108e68bb.png]

> 在技术的道路上，我们不断探索、不断前行，不断面对挑战、不断突破自我。科技的发展改变着世界，而我们作为技术人员，也在这个过程中书写着自己的篇章。让我们携手并进，共同努力，开创美好的未来！愿我们在科技的征途上不断奋进，创造出更加美好、更加智能的明天！

![在这里插入图片描述][996fad2bf2e14c7fb775e5b8463b3c55.png_pic_center]

[b4ea44285b26458093ee6e32cef6fcce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/84fbbd9b4ed244349537f59db7c76f04.png
[0594fafffa594d1cacc365d9e53b7067.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/7048e9a1ad464f9a9750dbbf39c7a118.png
[c723c46a8dff40b19f4c6263686c6b3c.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/471cc324b37c43459eb38f67394f6124.jpeg
[12efb2b164ed4bafb67c37fa16d45547.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/356e3bee2385479fb50b6f04a9a8d947.jpeg
[f6bd5b2e81a94c539c40c9a193e6b5c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/0bd743a9adc04db0876ef03431cdc387.png
[ce1b63a8d57b43b89c5f08e2b443d822.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/18a9d218dc954ddba2c8c0b185f759c0.png
[6f8488b2f27d41b58a4eb96293b1219c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/2d4eb1af04fe4bf488384968a4da7bf8.png
[8551862f9c66486d9345671f21f9e637.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/9cc305fdafd440d3866ca255844cd53b.png
[d9bc26df707e45868354e5686a93d611.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/ca32e665a26846bc9a62bb00961615b9.png
[757f901ed734416c81c8c11d5ca2c5c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/156f16db5da44fa9ad60c949bba89d07.png
[49140a6ec3044ab6a19a2ca7c101158a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/4eb0e28ea204409ab8ee2b7e60cb1751.png
[69e4146148714075a3f86f4cde93f587.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/6524910edb5a4e90a4a668f006fbd1c0.png
[315b94b321294f3fb2b6663605c44aa7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/ba04cb37b21e425592f7f75e5b527b68.png
[281220964b884a04af52298fd8abe82f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/bdd953bfe29e4ed3a557f8805474c17f.png
[3d817226cb044637b30c05e13e486bf1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/fbb9cb8324864e40b07d766cee13258f.png
[66d27f603aea4054b7ce70b307eef0a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/141f6e77e3324889b0a8c765485bed3d.png
[fc4f4589fd8b40218b5aa3bbee33cfad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/6f4c0046aab148a3b5eb8d53f20e99e8.png
[2e13fc92216e4a4eaa0e4fb0d6949bc4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/309db6df09ea4280ac2a6645cf17512b.png
[06e99c553ed0483ab99473278f943894.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/c93055797c274ab29b46b90d80b089a6.png
[22ece384f8a648b0936fa3176114ffe3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/4ba28b4310ff4b298e3cd4c55a5ab409.png
[909227ad9ac7461890ed4a33a9d51bdf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/30d6a73413c84766bca58726f93fd8b0.png
[5953b587303c4bc190f636d33f60f23d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/a77d52eae1eb418381b7246f5db10c0a.png
[535312918b594354ae37e3ed3ddd6053.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/1ef738bbf7d04fce8588676830dc9e8c.png
[102a0f4b40f14253bc1121ab1f819616.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/107c4e6a7dc94506aae27cee9a45bca7.png
[51544c55b83447eb8a153966afdaae07.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/e2e65cc1cdb743659d8935ee7f9b65f2.png
[1524c9b266d044f094a76f687d125c8e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/d297cbd2b4bb4b48b9cd65c39abdc7d4.png
[5f28951be67842a9a97427a3a0fc739f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/ae5d41d975164267837113edb11ccf43.png
[62555d8b61fc4561976cf04956ca2ed8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/4a017ffc062340a68dd71c9302333891.png
[7e75c238d59a485da0d99686a0688eac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/c8df13e3893b4cf182151bc955d32c7a.png
[8c56a981bd9d4fb88de62591cdf850bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/91706d80aa214f058d7d6c0de8c1cead.png
[b4dfb334b1f4423ca578fa00108e68bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/991adf3c554947cb8e11746ede612257.png
[996fad2bf2e14c7fb775e5b8463b3c55.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/8575b4a78a7a41f88f793e2683e1c27a.png