若依如何进行页面路由跳转,路由跳转时如何携带参数(超详细图文教程)

我们经常会有这样需求,当我们在一个页面时,想要跳转到另一个页面,但是跳转的同时还需要携带参数。那么这种情况在若依系统中该如何做呢,下面我们来说一下。

文章目录

    • 问题提出:
    • 一、创建目标页面的路由(也就是图2的路由)
    • 二、给按钮编写路由跳转方法,并携带参数
    • 三、在目标页面中拿到路由的参数并在页面进行展示
    • 四、注意事项 :

问题提出:

我这里有个学生成绩展示的表格(如图1),当我单击查看详情时我想要跳转到另一个页面进行学生成绩的展示(如图2)。
在这里插入图片描述

图1

若依如何进行页面路由跳转,路由跳转时如何携带参数(超详细图文教程)_第1张图片

图2

一、创建目标页面的路由(也就是图2的路由)

1.1 首先找到前端src/router文件夹下的index.js页面

若依如何进行页面路由跳转,路由跳转时如何携带参数(超详细图文教程)_第2张图片
1.2 进入后在公共路由下,仿照上面路由的写法,新建一个目标页面的路由

如下图所示,我们新建了一个路由,路由的完整路由为,/student/studentScore
我们在新建一个路由后,就只需要修改如下这几个框出来的地方即可。
若依如何进行页面路由跳转,路由跳转时如何携带参数(超详细图文教程)_第3张图片

  {
    path: '/recipeAdvice',
    component: Layout,
    hidden: true,
    redirect: 'recipeAdvice',
    children: [
      {
        path: 'recipeAdviceCard',
        component: () => import('@/views/soil/recipeAdvice/index'),
        name: 'recipeAdviceCard',
        meta: { title: '配方建议填写' }
      }
    ]
  }

了解内容:

  {
    path: '/recipeAdvice',
    component: Layout,
    hidden: true,
    redirect: 'recipeAdvice',
    children: [
      {
        path: 'recipeAdviceCard',
        component: () => import('@/views/soil/recipeAdvice/index'),
        name: 'recipeAdviceCard',
        meta: { title: '建议卡填写' }
      }
    ]
  }

对这个路由内容的解析:
这是一个 Vue.js 的路由配置,它定义了一个 URL 路径 /recipeAdvice 对应的组件和子路由。下面是具体的解析:

  1. path: '/recipeAdvice':定义了主路由的路径为 ‘/recipeAdvice’。

  2. component: Layout:表示该路由对应的主组件是 Layout

  3. hidden: true:表示该路由在侧边栏导航或者面包屑中不会被显示。

  4. redirect: 'recipeAdvice':表示访问 ‘/recipeAdvice’ 时会自动重定向到 ‘recipeAdvice’。

  5. children: [...]:定义了子路由的数组。

    • 子路由的 path: 'recipeAdviceCard':定义了子路由的路径为 ‘recipeAdviceCard’,所以完整的访问路径为 ‘/recipeAdvice/recipeAdviceCard’。

    • component: () => import('@/views/soil/recipeAdvice/index'):表示该子路由对应的组件是动态导入的,路径为 ‘@/views/soil/recipeAdvice/index’,这种方式可以实现路由组件的懒加载,即当路由被访问的时候才加载对应的组件,可以提高应用的启动速度。

    • name: 'recipeAdviceCard':定义了路由的名称,可以在 这样的语法中使用。

    • meta: { title: '配方建议填写' }:定义了路由的元信息,这里设置了 title 属性为 ‘配方建议填写’,可以在导航守卫等地方获取并使用这个属性值。

总的来说,这段路由配置定义了一个 URL 路径为 ‘/recipeAdvice/recipeAdviceCard’ 的路由,当用户访问这个 URL 时,会加载并显示 ‘@/views/soil/recipeAdvice/index’ 这个组件,同时在面包屑或者侧边栏导航中不会显示这个路由。


二、给按钮编写路由跳转方法,并携带参数

跳转时使用this.$router.push来进行跳转,里面有path、query两个参数

path:就是刚刚配置的路由的完整路径,/student/studentScore 写到这里即可
query:就是要携带的参数,这里我传递了两个参数,一个id,一个成绩对象

注意:这里传递对象的话最好是转成json,否则的话那边接收就不太好处理,所以这里使用JSON.stringify方法将根据id查询出来的成绩对象给转成了json

这个是完整的查看详情按钮的写法:
若依如何进行页面路由跳转,路由跳转时如何携带参数(超详细图文教程)_第4张图片

this.$router.push({
          path:'/student/studentScore',
          query:{
            id:row.id,
            form:JSON.stringify(this.form)
          }
        })

三、在目标页面中拿到路由的参数并在页面进行展示

在目标页面中,我们直接在created中处理传递过来的路由参数,我们这里在拿参数值的时候使用this.$route.query.参数名(如图3.1所示)。
判断参数是否存在,如果存在就赋值给我们自己创建的对象,然后再将对象绑定到表单上即可,然后就完成了跳转自动回显(如图3.3所示)。

注意,这里query.获取的是传递时的参数名称(如图3.1所示,这是我们在路由跳转页面定义的参数名称)
若依如何进行页面路由跳转,路由跳转时如何携带参数(超详细图文教程)_第5张图片

图 3.1

若依如何进行页面路由跳转,路由跳转时如何携带参数(超详细图文教程)_第6张图片

图 3.2
    created() {
      //如果路由参数存在
      if (this.$route.query.id && this.$route.query.form) {
        this.studentId = this.$route.query.id;
        this.areaObj = JSON.parse(this.$route.query.form);
        console.log(this.studentId,"studentId-------------")
        console.log(this.areaObj,"areaObj-------------")
      }
      if (this.areaObj) {
        this.from2=this.areaObj;

      }
    },

若依如何进行页面路由跳转,路由跳转时如何携带参数(超详细图文教程)_第7张图片

图 3.3

四、注意事项 :

1、这里必须把配置写到公共路由的下面
2、如果路由没有成功跳转,检查component的路径是否配置正确以及调用时路径是否书写正确
3、如果上面都没有问题,可以重启前端项目试一下
4、传递对象参数时建议转成json,这样处理起来也比较方便

你可能感兴趣的:(#,若依,vue,前端)