> For the complete documentation index, see [llms.txt](https://docs.elentra.org/ejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elentra.org/ejs/1.3/guide/routing/view-links.md).

# ViewLink Component

## Introduction

The **ViewLink** [component](/ejs/1.3/guide/modules/components.md) allows you to create a hyperlink to a given [route](/ejs/1.3/guide/routing/routes.md) within a component definition, automatically taking care of [generating](/ejs/1.3/guide/routing/path-generation.md) the appropriate path.

## Examples <a href="#examples" id="examples"></a>

`use('ElentraJS/View/Component/ViewLink.vue');`

```markup
<!-- Link to a Named Route -->
<view-link to="sandbox.index">My Link</view-link>

<!-- Link to a Named Route with custom parameters -->
<view-link to="sandbox.index" :params="{ sandboxId: 3 }">My Link</view-link>

<!-- Link to a standard URL -->
<view-link href="https://google.com">Google Link</view-link>

<!-- When Active -->
<view-link to="sandbox.index" class="view-link-active">My Link</view-link>
<!-- When Child Active -->
<view-link to="sandbox.index" class="view-link-active">My Link</view-link>
<!-- Ignore Child Active -->
<view-link to="sandbox.index" exact="true">My Link</view-link>

<!-- When Error (route not defined) -->
<view-link to="sandbox.typo" class="view-link-error">My Link</view-link>
```

```css
/** Scope Dynamic CSS to a Component **/
.my-component .view-link-active {
    font-weight:bold;
}

.my-component .view-link-error {
    text-decoration:line-through;
}
```