vue-router-dom
v1.0.0-beta.1
Published
Router for Vue 3 and up
Downloads
14
Maintainers
Readme
vue-router-dom
vue-router-dom
is an implementation of react-router for vue 3, providing components and hooks for routing.
Table of contents
Install
npm i vue-router-dom
API
For API documentaiton, please visit React Router API.
Non-standard APIs
install
The install export is a function that registers all the components globally
import { install } from 'vue-router-dom'
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App).use(install)
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>
<template #default>
<Route path="/">
<UsersIndex />
</Route>
<Route path=":id">
<UserProfile />
</Route>
<Route path="me">
<OwnUserProfile />
</Route>
</template>
</Route>
</Routes>
</BrowserRouter>
</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')
}
// ...
},
}