@kitbag/router

Vue.js 的类型安全路由器

<img src="https://yellow-cdn.veclightyear.com/835a84d5/67e0eef6-c728-46bf-b4f9-71e6f5ef62e2.svg" width="20%" />

入门

通过我们的文档开始使用

安装

# bun
bun add @kitbag/router
# yarn
yarn add @kitbag/router
# npm
npm install @kitbag/router

定义基本路由

创建一个可能路由的数组。了解更多关于定义路由的信息。

// /routes.ts
import { createRoute } from '@kitbag/router'

const Home = { template: '<div>首页</div>' }
const About = { template: '<div>关于</div>' }

export const routes = [
  createRoute({ name: 'home', path: '/', component: Home }),
  createRoute({ name: 'path', path: '/about', component: About }),
]

插件

创建一个路由器实例并将其作为插件传递给应用程序

import { createApp } from 'vue'
import { createRouter } from '@kitbag/router'
import { routes } from '/routes'
import App from './App.vue'

const router = createRouter(routes)
const app = createApp(App)

app.use(router)
app.mount('#app')

更新注册的路由器

此代码块利用声明合并来提供与实际使用的路由器匹配的内部类型。您可以在调用 createRouter 后立即将此代码放在 main.ts 中，或者导出您的路由器并将此接口放在 router.d.ts 文件中，只要您的 tsconfig 可以找到它即可。

declare module '@kitbag/router' {
  interface Register {
    router: typeof router
  }
}

推送

要导航到另一个路由，您可以使用 router.push。此方法将更新浏览器的 URL，并将 URL 添加到历史记录中，以便用户使用浏览器的后退按钮时能够按预期工作。

import { createRoute, useRouter } from '@kitbag/router'

const user = createRoute({
  name: 'user',
  path: '/user',
  component: ...,
})

const profile = createRoute({
  parent: user,
  name: 'profile',
  path: '/profile',
  component: ...,
})

const settings = createRoute({
  parent: user,
  name: 'settings',
  path: '/settings',
  component: ...,
})

const router = useRouter([user, profile, settings])

router.push('user.settings')

如果您知道要跳转的 URL，push 方法也接受普通字符串。

router.push('/user/settings')
router.push('https://github.com/kitbagjs/router')

这个 source 参数是类型安全的，期望是 Url 或有效的路由 "key"。Url 是以 "http"、"https" 或正斜杠 "/" 开头的任何字符串。路由 key 是由句点 . 连接的路由名称字符串。此外，如果使用路由 key，如果有任何参数，push 将要求传入参数。

更新

如果您只想更改当前路由的参数，可以使用 router.route.update。

router.route.update('myParam', 123)

或一次设置多个参数

router.route.update({
  myParam: 123,
  tab: 'github',
})

RouterView

为您的路由组件提供一个挂载位置

<!-- App.vue -->
<div class="app">
  ...
  <!-- 匹配的 route.component 在这里渲染 -->
  <router-view />
</div>

这个组件可以挂载在您想要挂载路由组件的任何位置。嵌套路由也可以有一个嵌套的 RouterView，负责渲染该路由可能拥有的任何子路由。阅读更多关于嵌套路由的信息。

RouterLink

使用 RouterLink 在路由之间导航。

<template>
  ...
  <!-- router-link 渲染为带有 href 的 <a> 标签 -->
  <router-link :to="(resolve) => resolve('home')">前往某处</router-link>
</template>

这个组件使路由器能够在不重新加载页面的情况下更改 URL。