卡片跳转及参数传递

_{手机 手表}

了解卡片实现跳转，并传递参数

通过本节，你将学会：

• 组件 a 切换页面
• 接口 router 切换页面

组件 a 跳转

跳转页面

组件 a 可通过配置 href 属性跳转到应用或H5的页面

示例如下：

<template>
  <div class="tutorial-page">
    <a href="https://doc.quickapp.cn/">跳转到H5</a>
  </div>
</template>

传递参数

通过组件 a 实现页面切换时，可以通过'?key=value'的方式添加参数，支持参数为变量

示例如下：

<template>
  <div class="tutorial-page">
    <!-- 添加参数 -->
    <a href="https://doc.quickapp.cn/?key=Hello, world!">携带参数key跳转H5</a>
    <!-- 添加变量参数 -->
    <a href="hap://app/com.quickapp.cn/?key={{title}}">携带动态参数key跳转快应用</a>
  </div>
</template>

<style>
  .tutorial-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  a {
    margin-top: 75px;
    font-size: 30px;
    color: #09ba07;
    text-decoration: underline;
  }
</style>

<script>
  export default {
    data: {
      title: 'Hello, world!'
    },
    onInit () {
      console.log('组件a切换页面并传递参数')
    }
  }
</script>

接口 router 跳转

跳转页面

router 接口在使用前，需要先导入模块

router.push(OBJECT)支持的参数 uri 与组件 a 的 href 属性完全一致

示例如下：

<template>
  <div class="tutorial-page">
    <input class="btn" type="button" value="跳转到接收参数页面" onclick="routePagePush"></input>
  </div>
</template>

<style>
  .tutorial-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .btn {
    width: 550px;
    height: 86px;
    margin-top: 75px;
    border-radius: 43px;
    background-color: #09ba07;
    font-size: 30px;
    color: #ffffff;
  }
</style>

<script>
  // 导入模块
  import router from '@system.router'

  export default {
    onInit () {
      console.log('接口router跳转页面')
    },
    routePagePush () {
      // 跳转到应用内的某个页面
      router.push({
        uri: 'hap://app/com.quickapp.cn/homepage'
      })
    }
  }
</script>

传递参数

router 接口的参数 params 可配置页面跳转时需要传递的参数

示例如下：

<template>
  <div class="tutorial-page">
    <input class="btn" type="button" value="携带参数跳转页面" onclick="routePagePushWithParams"></input>
  </div>
</template>

<style>
  .tutorial-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .btn {
    width: 550px;
    height: 86px;
    margin-top: 75px;
    border-radius: 43px;
    background-color: #09ba07;
    font-size: 30px;
    color: #ffffff;
  }
</style>

<script>
  // 导入模块
  import router from '@system.router'

  export default {
    data: {
      title: 'Hello, world!'
    },
    onInit () {
      console.log('接口router切换页面并传递参数')
    },
    routePagePushWithParams () {
      // 跳转到应用内的某个页面
      router.push({
        uri: 'hap://app/com.quickapp.cn/homepage',
        params: { key: this.title }
      })
    }
  }
</script>