组件

简介

@esmx/router-vue 提供两个内置 Vue 组件：RouterView 用于渲染匹配的路由组件，RouterLink 用于声明式导航。使用 RouterPlugin 时，两者都会被全局注册。

RouterView

组件名称：RouterView

在当前深度渲染匹配的路由组件。通过 Vue 的 provide/inject 机制支持嵌套路由和自动深度跟踪。

<template>
    <div id="app">
        <nav>
            <RouterLink to="/">首页</RouterLink>
            <RouterLink to="/about">关于</RouterLink>
        </nav>

        <!-- 路由组件在此渲染 -->
        <RouterView />
    </div>
</template>

嵌套路由：

<!-- 父级布局组件 -->
<template>
    <div class="layout">
        <aside>
            <RouterLink to="/user/profile">个人资料</RouterLink>
            <RouterLink to="/user/settings">设置</RouterLink>
        </aside>
        <main>
            <!-- 嵌套路由组件在此渲染 -->
            <RouterView />
        </main>
    </div>
</template>

RouterLink

组件名称：RouterLink

导航链接组件，渲染带有适当导航行为和活跃状态管理的锚元素。

Props：

属性	类型	默认值	描述
`to`	`RouteLocationInput`	必填	目标路由位置
`type`	`RouterLinkType`	`'push'`	导航类型
`replace`	`boolean`	`false`	已弃用 — 使用 `type="replace"`
`exact`	`RouteMatchType`	`'include'`	活跃状态匹配策略
`activeClass`	`string`	—	活跃状态的自定义 CSS 类
`event`	`string \| string[]`	`'click'`	触发导航的事件
`tag`	`string`	`'a'`	要渲染的 HTML 标签
`layerOptions`	`RouteLayerOptions`	—	`type='pushLayer'` 时的层选项
`beforeNavigate`	`Function`	—	导航前的钩子

<template>
    <nav>
        <!-- 基本导航 -->
        <RouterLink to="/home">首页</RouterLink>
        <RouterLink to="/about">关于</RouterLink>

        <!-- 自定义样式 -->
        <RouterLink to="/dashboard" active-class="nav-active">
            仪表盘
        </RouterLink>

        <!-- 替换导航 -->
        <RouterLink to="/login" type="replace">登录</RouterLink>

        <!-- 精确匹配和自定义标签 -->
        <RouterLink to="/contact" exact="exact" tag="button">
            联系我们
        </RouterLink>

        <!-- 在新窗口打开 -->
        <RouterLink to="/docs" type="pushWindow">
            文档
        </RouterLink>
    </nav>
</template>

#组件

#简介

#RouterView

#RouterLink

组件

简介

RouterView

RouterLink