【Web全栈】Vue:路由传参

发布于:2022-11-29 ⋅ 阅读:(297) ⋅ 点赞:(0)

目录

〇、传参方式的分类

一、显示参数的 params 传参

编程式

二、不显示参数的 params 传参

声明式

编程式

三、显示参数的 query 传参

编程式


        在做有关隐患审核的项目的时候遇到这么一个问题:

        多个隐患被列在一个列表当中,这个时候我要查看的是其中一个隐患的隐患信息。

        一个最简单的方式就是将这个隐患的隐患编号传递给隐患详情页面,通过ajax或者axios用这个编号去数据库请求这个编号对应的信息。

        那么问题来了,我该怎么在vue当中将参数这样传递呢?

        这就牵涉到传参问题了。由于我想通过url来传参,所以我第一个想到的就是靠操作url来实现功能的router(路由)。

〇、传参方式的分类

        路由传参在方式上传参方式可划分为 params 传参query 传参

        而 params 传参又可分为在 url 中显示参数(即在url当中能不能看到我们传去的参数)和不显示参数(即在url当中看不到我们传过去的参数)两种方式;

一、显示参数的 params 传参

        params 传参(显示参数)又可分为 声明式 和 编程式 两种方式:

        如果是路由传参,那么我们首先要配置路由,在这个方法中router当中配置子组件路由为:

{  
  path: '/father',  
  component:Father,  
  children:[  
     //子路由配置  
    {  
      path: '/child/:id',  
      component: Child  
    }  
  ]  
}  

        在router-link这个标签当中利用其自带的to属性来实现params传参:

<!-- 父组件路由 -->  
<router-link :to="/child/123">进入Child路由</router-link> 

        其参数可以是一个字符串路径,或者一个描述地址的对象。只是使用该方式传值的时候,需要子路由提前配置好参数,如上面路由配置代码段。

编程式

        我们可以通过一些事件触发某个方法,然后在这个方法当中通过编程实现路由传参的过程,这个方法我个人很喜欢用,因为这样可以让我们对url的操作更加灵活:

//父路由编程式传参(一般通过事件触发)  
methods:{    
    jump(id){    
        this.$router.push({    
            path:"/HDCheck/"+id    
        })    
    }    
}    

        在子路由中可以通过下面代码来获取传递的参数值

this.$route.params.id  

        有的时候一个页面加载太慢用户会点一下刷新,这个方法在页面刷新的之后我们传的参数是不会丢失的。

二、不显示参数的 params 传参

        params 传参(不显示参数)也可分为 声明式 和 编程式 两种方式,与方式一不同的是,这里是通过路由的别名 name 进行传值的

声明式

该方式也是通过 router-link 组件的 to 属性实现,例如:

<router-link :to="{name:'Child',params:{HDid:123}}">Child路由</router-link>   

在这里to的参数是一个对象,而不再是一个url了,因此我们在配置子路由的时候需要想个办法让这个对象能够和一个固定的url对应上。

什么办法呢?

诶?我们给子组件路由起个名字不就得了,这样用名字找人和用家庭地址找人不是大同小异。所以我们的子路由配置要变成如下形式:

{    
  path: '/father',    
  component:Father,    
  children:[    
     //子路由配置    
    {    
      path: '/child/:id',    
      name:'Child',  
      component: Child    
    }    
  ]    
} 

编程式

当我们像上面那样配置好了子组件路由之后,我们函数式编程的使用方式也发生了变化。

//父路由编程式传参  
this.$router.push({  
    name:'Child',  
    params:{  
        id:123  
    }  
})  

在子路由中可以通过下面代码来获取传递的参数值

this.$route.params.id  

一定要注意,这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候,传递的值会丢失

三、显示参数的 query 传参

        query 传参(显示参数)也可分为 声明式编程式 两种方式

声明式

        该方式也是通过 router-link 组件的 to 属性实现,不过使用该方式传值的时候,和用params传值一样,因为to的参数不再是一个url了,所以需要子路由提前起好路由名字(路由别名——name 属性)来让url和路由一一对应:

//子路由配置  
{  
  path: '/child',  
  name: 'Child',  
  component: Child  
}  

如此配置好之后,其使用方式和params传参就大同小异了,区别就是属性to中对象的参数不再是params,而是query。

<!--父路由组件-->  
<router-link :to="{name:'Child',query:{HDid:123}}">进入Child路由</router-link> 

编程式

        由于子路由提前配置好路由别名(name 属性),所以在使用query的时候,编程式的形式也会有所变化:

//父路由编程式传参(一般通过事件触发)  
this.$router.push({  
    name:'Child',  
    query:{  
        id:123  
    }  
})  

        在子路由中可以通过下面代码来获取传递的参数值

this.$route.query.id  

        这种情况下刷新是不会丢失参数的哦,所以综合三种方案我个人最爱用的就是第三种了。

        但是呢,具体情况具体分析哈。

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到