Vue2.0 路由传参 query params props

前言

谈及vue2的路由传参，我们想到最多的就是 query,和params，并且很多人都喜欢用query,认为params传参刷新页面数据会丢失，其实这是一个误区

query 传参

开始传递

this.$router.push({
        name: "routerProps",
        query: {
          name: "sjf",
          age: 18,
        },
      });

name 路由的名称

query 参数对象

接收参数

this.$route.query.name 

params 传参

开始传递

  this.$router.push({
        name: "routerProps",
        params: {
          name: "sjf",
          age: 18,
        },
      });

name 路由名称

params 参数对象

路由配置

{
            name: 'routerProps',
            icon: 'el-icon-service',
            path: 'routerProps/:name/:age',
            component: routerProps,
            meta: {
              loginAuth: true,
              title: '路由props'
            },
          }

path 后用 /:参数名/:参数名  拼接多个参数 如果不进行该配置 会 出现刷新页面数据丢失的情况

接收参数

this.$route.params.name

props 处理参数 

便与访问路由传递的参数，可以通过props直接访问，不许要再使用 this.$route.query或者this.$route.params等

params的情况

路由配置

 {
            name: 'routerProps',
            icon: 'el-icon-service',
            path: 'routerProps/:name/:age',
            component: routerProps,
            meta: {
              loginAuth: true,
              title: '路由props'
            },
            props:true
          }

组件使用

 props:['name','age'],
    mounted(){
        this.$route.query.name 
        console.log("name====age",this.name,this.age)
    }

query的使用

路由配置

{
            name: 'routerProps',
            icon: 'el-icon-service',
            path: 'routerProps/:name/:age',
            component: routerProps,
            meta: {
              loginAuth: true,
              title: '路由props'
            },
            props($route){
              return{
                name:$route.query.name,
                age:$route.query.age
              }
            }
          }

组件使用

props:['name','age'],
    mounted(){
        this.$route.query.name 
        console.log("name====age",this.name,this.age)
    }