首页 > 数码 正文

支持嵌套路由 路由器如何嵌套

时间:2023-09-27 作者:佚名

前言:

在前一篇文章中,我们说了怎样开发动态路由和动态菜单,但是之前的项目缺乏对嵌套路由的一个支持。

嵌套路由是路由中提供了一个非常主要的路由方法,可以更好地表达层级关系和辅助的组件,我们可以快速的在一个组件当中开发很多的功能部分。这样我们便可实现主路由不跳转,而实现局部的一个变化,这是非常有用的。

使用示例:

什么是嵌套路由:

嵌套路由vue-router官网上有详细的介绍。在我个人的理解来说,他就是在主路由上通过“”确定一个显示区域,这样子我们通过访问主路由下面的子路由,我们便可将子路由的内容显示在之前绑定所要显示的区域之内,这样有利于我们开发组件的功能开发,比如说我们在进行一个用户管理组件开发时,我们可以可以通过嵌套路由的形式快速实现用户管理、用户信息回复、用户修改、用户添加等功能模块的开发。我们便可实现功能区域快速的切换,减少了自己的逻辑的一个换算,这是对于我们来说是非常有用的,特别是一些复杂的界面。

和之前分享的差异

之前我也发过一个动态路由和动态菜单相互绑定的一个开发框架,但之前的UI框架只能生成一些传统的路由和菜单,不支持嵌套路由的生成,这次嵌套路由生成的优化,可以为整个网站提供嵌套路由的一个配置和管理,这样子我们便可更快的完成组件功能的开发。实现嵌套路由与动态菜单功能的优化使该vue开发框架更加具有实用性,防止因为框架不支持嵌套路由带来的一些阻碍影响了大家的开发。

其次,我们也集成了一些常用的库,方便大家快速的进行开发和引用,但我们为了方便各自的一个开发情况,那么我们在进行开发适配的过程中,我们只集成JavaScript库,并没有对项目进行任何其他的优化和调整,因为每个人的需要是不一样的,每个项目的需要也是不一样的,我们尽可能不干扰你的正常项目开发。

你只需要创建自己的组件,进行挂载,绑定菜单即可。

集成js库:

axios:v0.21.1

core-js:v3.6.5

echarts:v5.1.2

element-ui:v2.15.5

vue:v2.6.11

vue-router:v3.2.0

前期准备:

一、我们在s rc文件下新建一个unitui文件夹,下面新建pages(防止公共页面)、sub(公共组件)、ui(菜单组件)三个文件夹。

然后我们再配置一些常用的公共页面(不需要权限)页面如登录、找回密码、注册和404错误页。

其次,我们在ui文件夹下写入一些菜单区域内容,如左侧菜单、顶部菜单、底部菜单,那么我们的前期准备第一步已经完成

二、我们在静态assets\ json文件夹下面创建menu.json和route.json,这两个json文件是为模拟登录后,后端返回的路由和菜单json数据。我们可以依据这个json文件去生成路由和菜单信息,其中菜单信息可以直接用sessionStorage储存,路由信息需要持续生成·。

三、我们需要创建一个组件,用为管理路由(路由json信息管理和文件绑定)和菜单(生成和路由path绑定)。我们可以通过该组件可以快速管理路由文件位置和路由的一些相关信息,如网站标题、访问路径、路由名称、是否显示在框架内。

其次我们也要对菜单进行一个管理,我们对菜单的新增、删除、修改和访问地址进行一个是动态的设置,这样子我们便可实现一个动态管理组件。这样我们的前期准备就已经基本完成(该组件已经内置)。

内置管理组件:

实现原理:

示例:

添加路由:

添加子路由:

菜单部分:

添加一级菜单:

添加二级菜单

二级菜单路由选择:

防止刷新组件丢失:

在我们基本配置之后,会发现我们正常的路由切换是没有任何问题,但是我们产生刷新行为之后。我们的数据就会进行一个丢失,特别是添加路由的一个数据会进行丢失,那么此时我们路由跳转就会产生一个路由跳转失败,为了防止因为跳转失误带来的体验问题,我们会在App.vue文件下的mounted中执行路由的初始函数对之前通过sessionStorage储存的路由信息进行路由添加防止跳转失败,你也可以在这里判断用户是否登录等。

源码获取方式:

在后台私信“unituicli”便可获取源码,里面的重要部分已经进行了详细注释。

本文信息为网友自行发布旨在分享与大家阅读学习,文中的观点和立场与本站无关,如对文中内容有异议请联系处理。

本文链接:https://www.paituo.cc/tech/1057403.html

  • 小编推荐

    小米12Pro性能提升了什么以及对比之前的机型性能提升了多少倍

    本文讲述小米12Pro性能提升了什么以及对比之前的机型性能提升了多少倍,简介如下 小米12Pro这是小米最新推出的一款标准的高端性能的旗舰手机,可以为用户提供很好的手机颜值的同时,带来很好的手机性能体验,那么这次的手机提升了多少? 小米12...

    2022年上半年值得入手的天玑9000的手机以及哪些天玑9000的手机可以入手

    本文讲述2022年上半年值得入手的天玑9000的手机以及哪些天玑9000的手机可以入手,简介如下 今天小编为大家带来准备了一些比较好用的天玑9000系列的手机,这些手机不仅仅为用户提供很好的颜值,同时为用户提供很好的性能体验,为用户提供更低的功耗,那么有哪...

    哔哩哔哩怎么参与直播嘉年华活动教程

    本文讲述哔哩哔哩怎么参与直播嘉年华活动教程,简介如下 哔哩哔哩推出了嘉年华活动,参与这里的直播嘉年华活动,就可获得丰富的直播奖励,想知道该如何参与的话,就和小编接着看下去吧。哔哩哔哩参与直播嘉年华活动教程 1、打...

    如何解决Win10系统麦克风声音太小

    本文讲述如何解决Win10系统麦克风声音太小,简介如下 如何解决Win10系统麦克风声音太小 1、首先找到右下角的喇叭图标。 2、接着右键点击选择录音设备,进入麦克风设置界面。 3、之后可以看到我们的麦克风设备是否...

    苹果电脑怎么删除照片

    本文讲述苹果电脑怎么删除照片mac照片怎么批量删除,简介如下很多刚刚使用苹果电脑的小伙伴对于mac系统中的一些操作不是很了解,就比如说不知道在mac系统中怎么批量删除照片,不过啥都懂的小编就可以轻松帮助大家解决问题,现在...

    伊利爱儿俱乐部怎么注册会员

    本文讲述伊利爱儿俱乐部怎么注册会员,简介如下 开始购买伊利产品的用户,可以注册俱乐部会员来享受会员的权益,那要怎么注册成为会员呢?下面就来为大家详细介绍一下具体操作步骤,一起看看吧 伊利爱儿俱乐部怎么注册...

    如何在PS中对图片进行缩放或放大的操作 如何在ps中图片抽去颜色放到其他空白图片里

    如何在PS中对图片进行缩放或放大的操作,简介如下如何用PS轻松实现图片的放大缩小、调整如何用PS轻松实现图片的放大缩小、调整Photoshop是一款常用的图像处理软件,其功能强大,可以实现各种各样的图像处理效...

    如何取消超链接 如何取消超链接快捷键

    如何取消超链接,简介如下超链接(Hyperlink)是Web页面中非常重要的元素之一,它可以让用户从一个页面轻松地跳转到另一个相关页面。但是,有时候我们不想让某些链接生效,那么怎么取消...