CAnchor 应用内超连接

功能说明

应用内超连接组件，用于在应用内部页面之间进行跳转，封装了 Taro 的页面跳转方法，支持多种跳转模式。组件可包裹任何内容作为点击触发区域。

引用方式

import CAnchor from '@components/layout/anchor';

组件参数

• href (String，必选)：跳转目标路径，可以是页面路径，也可以是特殊值 'back'
• rel (String，可选)：跳转方式，默认值为 'navigate'
• navigate：保留当前页面，跳转到应用内的某个页面（对应 Taro.navigateTo）
• redirect：关闭当前页面，跳转到应用内的某个页面（对应 Taro.redirectTo）

使用示例

基础用法

<template>
  <view class="page">
    <CAnchor href="/pages/order/detail?id=12345">
      <view class="link-text">查看订单详情</view>
    </CAnchor>
  </view>
</template>

<script>
import CAnchor from '@components/layout/anchor';

export default {
  components: {
    CAnchor
  }
}
</script>

包裹图片或按钮

<template>
  <view class="page">
    <!-- 包裹图片 -->
    <CAnchor href="/pages/product/detail?id=6789">
      <image 
        src="/static/images/product.jpg" 
        mode="aspectFill" 
        class="product-image"
      />
    </CAnchor>
    
    <!-- 包裹按钮 -->
    <CAnchor href="/pages/cart/index">
      <AtButton type="primary">
        去购物车结算
      </AtButton>
    </CAnchor>
  </view>
</template>

<script>
import CAnchor from '@components/layout/anchor';
import { AtButton } from 'taro-ui-vue';

export default {
  components: {
    CAnchor,
    AtButton
  }
}
</script>

返回上一页

<template>
  <view class="page">
    <CAnchor href="back">
      <view class="back-link">
        <AtIcon value="chevron-left" size="16" />
        <text>返回上一页</text>
      </view>
    </CAnchor>
  </view>
</template>

<script>
import CAnchor from '@components/layout/anchor';
import { AtIcon } from 'taro-ui-vue';

export default {
  components: {
    CAnchor,
    AtIcon
  }
}
</script>

<style>
.back-link {
  display: flex;
  align-items: center;
}
</style>

重定向模式

<template>
  <view class="page">
    <CAnchor 
      href="/pages/login/index" 
      rel="redirect"
    >
      <view class="redirect-link">
        请先登录后再操作
      </view>
    </CAnchor>
  </view>
</template>

<script>
import CAnchor from '@components/layout/anchor';

export default {
  components: {
    CAnchor
  }
}
</script>

注意事项

1. 组件通过默认插槽提供内容，可以包裹任何元素作为点击区域
2. href 参数必须提供有效的页面路径，否则点击不会触发任何操作
3. 当 href 设置为 'back' 时，等同于调用 Taro.navigateBack() 方法
4. 页面路径应该以 '/' 开头，例如 '/pages/index/index'
5. 可以在路径中添加查询参数，例如 '/pages/detail?id=123'
6. 重定向模式会关闭当前页面，无法通过返回按钮回到当前页面