# CAnchor 应用内超连接

## 功能说明

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

## 引用方式

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

## 组件参数

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

## 使用示例

### 基础用法

```html
<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>
```

### 包裹图片或按钮

```html
<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>
```

### 返回上一页

```html
<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>
```

### 重定向模式

```html
<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. 重定向模式会关闭当前页面，无法通过返回按钮回到当前页面

<!-- 作者：Tevin -->