001：vue路由传递参数的几种方式详解

「爱情、让人受尽委屈。」 2024-03-24 12:28 122阅读 0赞

![在这里插入图片描述][32d2a1d099334cfba6adc4f84dd79e22.png_pic_center]

第001个

查看专栏目录: [按照VUE知识点][VUE] \------ [按照element UI知识点][element UI]

[echarts，openlayers，cesium，leaflet，mapbox，d3，canvas 免费交流社区 ][echarts_openlayers_cesium_leaflet_mapbox_d3_canvas _]  
  
  
**专栏目标**  
在vue和element UI联合技术栈的操控下，本专栏提供行之有效的源代码示例和信息点介绍，做到灵活运用。

> （1）提供vue2的一些基本操作：安装、引用，模板使用，computed，watch，生命周期(beforeCreate，created,beforeMount，mounted, beforeUpdate，updated, beforeDestroy，destroyed，activated，deactivated，errorCaptured，components，)、 $root , $parent , $children , $slots , $refs , props, $emit , eventbus ,provide / inject, Vue.observable, $listeners, $attrs, $nextTick , v-for, v-if, v-else,v-else-if，v-on，v-pre，v-cloak，v-once，v-model， v-html, v-text, keep-alive，slot-scope， filters, v-bind，.stop, .native, directives，mixin，render，国际化，Vue Router等  
> （2）提供element UI的经典操作：安装，引用，国际化，el-row，el-col，el-button，el-link，el-radio，el-checkbox ，el-input，el-select, el-cascader, el-input-number, el-switch,el-slider, el-time-picker, el-date-picker, el-upload, el-rate, el-color-picker, el-transfer, el-form, el-table, el-tree, el-pagination,el-badge,el-avatar,el-skeleton, el-empty, el-descriptions, el-result, el-statistic, el-alert, v-loading, $message, $alert, $prompt, $confirm , $notify, el-breadcrumb, el-page-header,el-tabs ,el-dropdown,el-steps,el-dialog, el-tooltip, el-popover, el-popconfirm, el-card, el-carousel, el-collapse, el-timeline, el-divider, el-calendar, el-image, el-backtop，v-infinite-scroll， el-drawer等

#### 本文章目录 ####

*   *  编程式导航
     *   *  字符串
         *  对象
     *  声明式的导航

vue-router传递参数分为两大类：

> 编程式的导航 router.push  
> 声明式的导航

### 编程式导航 ###

1）编程式导航传递参数有两种类型：**字符串、对象**。

#### 字符串 ####

字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数：  
**this.$router.push(“home”);**

#### 对象 ####

想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数，下面分别说明两种方式的用法和注意事项。

**命名路由**  
命名路由的前提就是在注册路由的地方需要给路由命名如：

命名路由传递参数需要使用params来传递，这里一定要注意使用params不是query。目标页面接收传递参数时使用params。特别注意：命名路由这种方式传递的参数，如果在目标页面刷新是会出错的

使用方法如下：  
**this.$router.push(\{ name: ‘news’, params: \{ userId: 123 \}\})**  
代码如下：

<template>
      <div class="hello">
        <h1>{
        {
         msg }}</h1>
        <button @click="routerTo">click here to news page</button>
      </div>
    </template>
    <script>
    export default {
        
      name: 'HelloWorld',
      data () {
        
        return {
        
          msg: 'Welcome to Your Vue.js App'
        }
      },
      methods:{
        
        routerTo(){
        
          this.$router.push({
         name: 'news', params: {
         userId: 123 }});
        }
      }
    }
    </script>
     
    <style>
    </style>
     
    接受传递的参数：
    <template>
      <div>
        this is the news page.the transform param is {
        {
        this.$route.params.userId}}
      </div>
    </template>
    <script>
      
    </script>

**查询参数**  
查询参数其实就是在路由地址后面带上参数和传统的url参数一致的，传递参数使用query而且必须配合path来传递参数而不能用name，目标页面接收传递的参数使query。  
注意：和name配对的是params，和path配对的是query  
使用方法如下：  
**this.$router.push(\{ path: ‘/news’, query: \{ userId: 123 \}\});**  
代码如下：

<template>
      <div class="hello">
        <h1>{
        {
         msg }}</h1>
        <button @click="routerTo">click here to news page</button>
      </div>
    </template>
    <script>
    export default {
        
      name: 'HelloWorld',
      data () {
        
        return {
        
          msg: 'Welcome to Your Vue.js App'
        }
      },
      methods:{
        
        routerTo(){
        
          this.$router.push({
         path: '/news', query: {
         userId: 123 }});
        }
      }
    }
    </script>
    <style>
    </style>
     
    接收参数如下：
    <template>
      <div>
        this is the news page.the transform param is {
        {
        this.$route.query.userId}}
      </div>
    </template>
    <script>
    </script>

运行效果如下：

### 声明式的导航 ###

字符串
    <router-link to="news">click to news page</router-link>
    命名路由
    <router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>
    查询参数
    <router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

最后总结：路由传递参数和传统传递参数是一样的，命名路由类似表单提交而查询就是url传递，在vue项目中基本上掌握了这两种传递参数就能应付大部分应用了，最后总结为以下两点：  
1.命名路由搭配params，刷新页面参数会丢失  
2.查询参数搭配query，刷新页面数据不会丢失  
3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

[32d2a1d099334cfba6adc4f84dd79e22.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/6e1227f46b74494fb18d7cb5b31ff613.png
[VUE]: https://blog.csdn.net/cuclife/article/details/131138955
[element UI]: https://blog.csdn.net/cuclife/article/details/131140113
[echarts_openlayers_cesium_leaflet_mapbox_d3_canvas _]: https://bbs.csdn.net/forums/giser