@esmx/router-vue
Version:
Vue integration for @esmx/router - A universal router that works seamlessly with both Vue 2.7+ and Vue 3
221 lines (220 loc) • 7.09 kB
TypeScript
import type { RouterLinkProps } from '@esmx/router';
import { type PropType } from 'vue';
/**
* RouterLink component for navigation.
* Renders an anchor tag with proper navigation behavior and active state management.
*
* @param props - Component properties
* @param props.to - Target route location to navigate to
* @param props.type - Navigation type ('push' | 'replace' | 'pushWindow' | 'replaceWindow' | 'pushLayer')
* @param props.replace - Use type='replace' instead
* @param props.exact - How to match the active state ('include' | 'exact' | 'route')
* @param props.activeClass - CSS class to apply when link is active
* @param props.event - Event(s) that trigger navigation
* @param props.tag - Custom tag to render instead of 'a'
* @param props.layerOptions - Layer options for layer-based navigation
* @param slots - Component slots
* @param slots.default - Default slot content
* @returns Vue component instance
*
* @example
* ```vue
* <template>
* <nav>
* <!-- Basic navigation -->
* <RouterLink to="/home">Home</RouterLink>
* <RouterLink to="/about">About</RouterLink>
*
* <!-- With custom styling -->
* <RouterLink
* to="/dashboard"
* active-class="nav-active"
* >
* Dashboard
* </RouterLink>
*
* <!-- Replace navigation -->
* <RouterLink to="/login" type="replace">Login</RouterLink>
*
* <!-- Custom tag and exact matching -->
* <RouterLink
* to="/contact"
* exact="exact"
* tag="button"
* class="btn"
* >
* Contact
* </RouterLink>
* </nav>
* </template>
* ```
*/
export declare const RouterLink: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
/**
* Target route location to navigate to.
* Can be a string path or route location object.
* @example '/home' | { path: '/user', query: { id: '123' } }
*/
to: {
type: PropType<RouterLinkProps["to"]>;
required: true;
};
/**
* Navigation type for the link.
* @default 'push'
* @example 'push' | 'replace' | 'pushWindow' | 'replaceWindow' | 'pushLayer'
*/
type: {
type: PropType<RouterLinkProps["type"]>;
default: string;
};
/**
* @deprecated Use 'type="replace"' instead
* @example :replace={true} → type="replace"
*/
replace: {
type: PropType<RouterLinkProps["replace"]>;
default: boolean;
};
/**
* How to match the active state.
* - 'include': Match if current route includes this path
* - 'exact': Match only if routes are exactly the same
* - 'route': Match based on route configuration
* @default 'include'
*/
exact: {
type: PropType<RouterLinkProps["exact"]>;
default: string;
};
/**
* CSS class to apply when link is active (route matches).
* @example 'nav-active' | 'selected'
*/
activeClass: {
type: PropType<RouterLinkProps["activeClass"]>;
};
/**
* Event(s) that trigger navigation. Can be string or array of strings.
* @default 'click'
* @example 'click' | ['click', 'mouseenter']
*/
event: {
type: PropType<RouterLinkProps["event"]>;
default: string;
};
/**
* Custom tag to render instead of 'a'.
* @default 'a'
* @example 'button' | 'div' | 'span'
*/
tag: {
type: PropType<RouterLinkProps["tag"]>;
default: string;
};
/**
* Layer options for layer-based navigation.
* Only used when type='pushLayer'.
* @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
*/
layerOptions: {
type: PropType<RouterLinkProps["layerOptions"]>;
};
/**
* Custom navigation handler called before navigation.
* Receives the event object and the event name that triggered navigation.
*
* @Note you need to call `e.preventDefault()` to prevent default browser navigation.
*/
beforeNavigate: {
type: PropType<RouterLinkProps["beforeNavigate"]>;
};
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
[key: string]: any;
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
/**
* Target route location to navigate to.
* Can be a string path or route location object.
* @example '/home' | { path: '/user', query: { id: '123' } }
*/
to: {
type: PropType<RouterLinkProps["to"]>;
required: true;
};
/**
* Navigation type for the link.
* @default 'push'
* @example 'push' | 'replace' | 'pushWindow' | 'replaceWindow' | 'pushLayer'
*/
type: {
type: PropType<RouterLinkProps["type"]>;
default: string;
};
/**
* @deprecated Use 'type="replace"' instead
* @example :replace={true} → type="replace"
*/
replace: {
type: PropType<RouterLinkProps["replace"]>;
default: boolean;
};
/**
* How to match the active state.
* - 'include': Match if current route includes this path
* - 'exact': Match only if routes are exactly the same
* - 'route': Match based on route configuration
* @default 'include'
*/
exact: {
type: PropType<RouterLinkProps["exact"]>;
default: string;
};
/**
* CSS class to apply when link is active (route matches).
* @example 'nav-active' | 'selected'
*/
activeClass: {
type: PropType<RouterLinkProps["activeClass"]>;
};
/**
* Event(s) that trigger navigation. Can be string or array of strings.
* @default 'click'
* @example 'click' | ['click', 'mouseenter']
*/
event: {
type: PropType<RouterLinkProps["event"]>;
default: string;
};
/**
* Custom tag to render instead of 'a'.
* @default 'a'
* @example 'button' | 'div' | 'span'
*/
tag: {
type: PropType<RouterLinkProps["tag"]>;
default: string;
};
/**
* Layer options for layer-based navigation.
* Only used when type='pushLayer'.
* @example { zIndex: 1000, autoPush: false, routerOptions: { mode: 'memory' } }
*/
layerOptions: {
type: PropType<RouterLinkProps["layerOptions"]>;
};
/**
* Custom navigation handler called before navigation.
* Receives the event object and the event name that triggered navigation.
*
* @Note you need to call `e.preventDefault()` to prevent default browser navigation.
*/
beforeNavigate: {
type: PropType<RouterLinkProps["beforeNavigate"]>;
};
}>> & Readonly<{}>, {
type: import("@esmx/router").RouterLinkType | undefined;
replace: boolean | undefined;
exact: import("@esmx/router").RouteMatchType | undefined;
event: string | string[] | undefined;
tag: string | undefined;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;