一、前言
在我们写项目的时候,很多时候都会用到二级页面的跳转,RuoYi框架中也不例外,RuoYi虽然前端用的是vue,但是因为其有权限设置,在实现二级页面跳转的时候和普通的页面跳转有所区别,博主这里进行记录,方便后期的后顾,也希望能对屏幕前的小伙伴们有所帮助。
二、实现过程
假设我们已经有了一张student表的CRUD操作,如图所示:
现在,我们要实现通过点击”按钮“实现页面的跳转操作,让我们来看看在RuoYi中如何操作。
①创建跳转页面
跳转页面的内容根据自己的需求设定,我这里是做测试就做个简单的内容,只要页面能跳过去就行。
②配置路由
配置跳转到familyDetail页面的路由,如下所示
③跳转方法
方法跳转如下:
④效果
三、总结
虽然,我这里使用的案例比较简单,但是在RuoYi中二级页面的跳转是使用非常频繁的。其实就像上述的案例所示,当跳转到”familyDetail“页面后,还可以通过
this.$route.params.参数名称
获取传递到”familyDetail“页面的参数,此时就可以根据我们自己的需求来完成一些数据的查询、显示等操作。
好啦!这篇博客就到这里了,如果有所帮助,别忘了,点赞、关注支持一波博主哦~