Vue Router路由中 的$route.params和$ro

一.简述

在实现页面跳转时，需要携带参数。在这里使用的是vue 中的路由Vue Router,使用前先安装依赖配置项目环境，具体操作参考windos环境安装Vue及配置环境

二. $router和$route的区别

$router : 是路由操作对象，只写对象
$route : 路由信息对象，只读对象

//操作 路由跳转
this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})

//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

三.route.params和$route.query的区别

• $route.params

类型: Object
一个 key/value 对象，包含了动态片段和全匹配片段，
如果没有路由参数，就是一个空对象。

• $route.query

类型: Object
一个 key/value 对象，表示 URL 查询参数。
例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

四.params和query的使用

1.$route.params的使用

使用params传参只能使用name进行引入

router/index.js路由的配置文件中需要写name,否则获取不到信息会提示undefined

{
path: '/second/:id/:name',
name: 'second',
component: () => import('@/view/second')
}

传参组件：test1.vue

<template>
<el-button @click="lookRourt">查看测试</el-button>
</template>

<script>
 export default {
 data() {
      return {   }
    },
    methods: {
      lookRourt() {
    //params传参 使用name
    this.$router.push({
        name:'second',
        params: {
    id:'456578',
     name: 'qwerty'
  }
})
      }
    }
}
</script>

接收参数组件：second.vue

<script>
  export default {
    data() {
      return {
       queryName :'',
        queryId :''
      }
    },
    mounted: function() {
 //params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;

    },
    methods: {

    },

  }
</script>

2.$route.query的使用

传参组件：test2.vue

<template>
<el-button @click="lookRourt">查看测试</el-button>
</template>

<script>
 export default {
 data() {
      return {   }
    },
    methods: {
      lookRourt() {
     //query传参，使用name跳转
      this.$router.push({
          name:'second',
         query: {
        queryId:'2121656',
        queryName: 'wewew'
    }
})

    //query传参，使用path跳转
    this.$router.push({
        path:'second',
        query: {
        queryId:'454645',
        queryName: 'qqweqwery'
    }
})
      }
    }
}
</script>

接收参数组件：second.vue

<script>
  export default {
    data() {
      return {
       queryName :'',
        queryId :''
      }
    },
    mounted: function() {
  //query传参接收
  this.queryName = this.$route.query.queryName;
  this.queryId = this.$route.query.queryId;

    },
    methods: {

    },

  }
</script>

不管是path引入还是name引入效果都一样

注

1.params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系
2.params一旦设置在路由，params就是路由的一部分，
如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容
3.路由后面没有/:id/:name，地址栏没有参数
4.query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，
而params相当于post请求，参数不会再地址栏中显示