uniapp 页面跳转传值和接收

Posted 2023-04-27

参考技术A 首先介绍最原始的跳转方法，类似于html中的 a 标签，不过在uniapp中需要将 a 标签换成
<navigator url='跳转的地址'>……</navigator>

下面我们来重点介绍下跳转传值的方法

<view @tap="toOpportnity(item.id)">转商机</view>；

写一个onLoad函数

对象传参的接收方法

单个参数的接收，这里使用id来进行介绍
首先要把传递过来的id进行赋值
请求接口，接口的url地址后面要加上传递过来的id【 /$this.id/ 】
完整步骤如下：

对象传参报错解决方案（详细请看本篇文章： https://www.cnblogs.com/sxdpanda/p/13304425.html ）

GET : 请求页面， 并返回页面内容【问服务器要数据】。

POST : 大多用于提交表单或上传文件，数据包含在请求体中【把数据提交给服务器】。

HEAD : 类似于GET请求，只不过返回的响应中没有具体的内容，用于获取报头。

PUT : 从客户端向服务器传送的数据取代指定文档中的内容【修改服务器上的数据】。

DELETE : 请求服务器删除指定的页面。

CONNECT : 把服务器当作跳板，让服务器代替客户端访问其他页面。

OPTIONS : 允许客户端查看服务器的性能。

TRACE : 回显服务器收到的请求，主要用于测试或诊断。

Vue-(10)页面跳转-传值

参考技术A

Vue 页面跳转，一般用 vue-router 来做。 在我们创建 Vue 项目框架时，在配置文件 package.json 里面一般都有默认添加的依赖库。

我们只要创建好 Vue 项目，其他的不用管了，直接用 vue-router 来实现页面跳转-传值。

在页面 HelloWord.vue 点击按钮，跳转到页面 textVue.vue ，并且传值

一，创建两页面，跳转-传值
1，这里我们用 Vue 框架自带的页面 HelloWord.vue ，然后自己创建一个页面 textVue.vue ,并且放在一个文件下 componebts ，当然文件位置可以改变，为了图简单。

2， HelloWord.vue 页面，添加点击跳转-传值事件
两种方法 @click 方法和 router-link 方法。

在 HelloWord.vue 页面， @click 方法

在 HelloWord.vue 页面， router-link 方法`

3， textVue 页面，添加接受事件和展示传递的值

获取传递的值

展示传递的值

二，在 router 文件夹的 index 文件下，配置好页面路径

最终效果图如下：

注释：1，当新建 Vue 文件，不在文件下，在其他文件夹的时候，那么在 router 文件夹的 index 文件如下。

注释：2，全局视图