Vue路由传参（params 与 query）

理解：

路由传参分为 params 传参与 query 传参，params 传参类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中（但是不能刷新）。params 只能配合 name 使用，如果提供了 path，params 会失效。query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用（亲测可用）。

问题一：name是什么呢？name 是配置路由时给 path 取的别名，方便使用。但要注意的是 “地址栏显示的路径始终是 path 的值”，如图定义路由

方式一：通过 params 传参

页面一：声明式：router-link to 以对象形式跳转

<router-link :to="{name:'home',params:{name:'路由传参'}}">跳转传递参数</router-link>

页面二：接收用 this.$route.params.+传过来的“name”

console.log('接收到了传过来的值', this.$route.params.name)

在控制台可以看见传参是否成功：

通过 params 传参有一个缺点，就是刷新页面就获取不到参数了。

方式二：通过 query 传参

页面一：声明式：router-link to 以对象形式跳转

<router-link :to="{name:'home',query:{name:'query路由传参'}}">query路由传参</router-link>

页面二：接收用 this.$route.query.+传过来的“name”

console.log('接收到了传过来的值', this.$route.query.name)

在控制台可以看见传参是否成功：

可以看到刷新前后都可以打印出传过来的参数。

params 传参和query 传参的区别就是：发现query传参并没有会丢失注意看地址栏在一开始跳转的时候发现就在url地址栏上以？拼接了参数路径，而params跳转时没有，所以说这也是params动态路由传参和query动态路由传参的区别，也是params对象传参为什么会消失的问题。

Vue路由传参（params 与 query）相关推荐

vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
Vue路由传参params 与 query
一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...
vue路由传参—params—query
1.Params的方式类似于get请求,传递的数据会在浏览器地址显示 Params路由传参分为三步: 1.绑定参数在你传参的路由绑定参数 2.发送数据 3.接收参数在路由页面用this.$rou ...
vue router 的路由传参 params 和 query 的区别
1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}&qu ...
vue路由传参 params传参不能传对象
不能传对象,传对象的时候,刷新完数据会丢失传递的是一个对象但是: 跳转以后,刷新页面,数据会丢失,所以说不能传对象,会有问题
Vue路由传参详解（params 与 query）
Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...
vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...
vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...

Vue路由传参（params 与 query）

理解：

Vue路由传参（params 与 query）相关推荐

最新文章

热门文章