vue-router-next

vue-router-next is an implementation of react-router for Vue 3, providing components and hooks for routing.

Table of contents

• Install
• API
• Non-standard APIs
  • Getting Started
  • Components
    • Route
      • v-slot:element
    • HashRouter
    • StaticRouter
  • Hooks
    • useInRouterContext

Install

npm i vue-router-next

API

For API documentation, please visit React Router API.

Non-standard APIs

Getting Started

The router export is a function that registers all the components globally

import { router } from 'vue-router-next'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(router)

app.mount('#app')

Components

Route

v-slot:element

Element slot can be used over element prop.

If both are present element slot will overwrite element prop.

<!-- App.vue -->
<template>
    <BrowserRouter>
      <Routes>
        <Route path="/">
          <Home />
        </Route>
        <Route path="users">
          <template #element>
            <Users />
          </template>
          <Route path="/">
            <UsersIndex />
          </Route>
          <Route path=":id">
            <UserProfile />
          </Route>
          <Route path="me">
            <OwnUserProfile />
          </Route>
        </Route>
      </Routes>
    </BrowserRouter>
</template>
  <!-- Home.vue -->
<template>
  <div>
    <nav>
      <Link to="users">users</Link>
    </nav>
  </div>
</template>
<!-- Users.vue -->
<template>
  <div>
    <nav>
      <Link to="me">My Profile</Link>
    </nav>

    <Outlet />
  </div>
</template>

HashRouter

StaticRouter

StaticRouter, HashRouter are not implemented yet

Hooks

useInRouterContext

is not implemented since it is easy to check in Vue

export default {
  setup() {
    const locationContext = inject(LOCATION_CONTEXT, null)
    if (locationContext === null) {
      throw new Error('not in router context')
    }
    // ...
  },
}