Provides a wrapper for router-view that allows you to show error pages without changing the URL.
Because:
- Trigger router-view change without changing current URL
- How to load 404 component conditionally
- Handling 404's with router
- 404 after xmlhttprequest
- 404 in SPA
You can install this package via yarn (or npm):
$ yarn add vue-error-page
This package depends on a global event bus in order to emit events that will show the error page. You must first define an event bus on the window
object. By default it looks for the eventBus
key but you can configure this to use a different key.
import Vue from 'vue';
import ErrorPage from 'vue-error-page';
window.eventBus = new Vue();
Vue.use(ErrorPage);
Vue.use(ErrorPage, {
tagName: 'app-view',
bus: 'eventBus',
event: 'error-page',
resolver: (component) => {
return require('./views/Errors/' + component).default;
}
});
Option | Default Value | Description |
---|---|---|
tagName | 'app-view' | The name of the component that wraps router-view . |
bus | 'eventBus' | The name of the event bus. (Must be defined on window .) |
event | 'error-page' | The name of the event being emitted and listened to. |
resolver | (component) => { return component; } | This is essentially just a shortcut for importing the component. This will not work with SSR. |
Then you can swap router-view
with app-view
(or whatever you defined for tagName
).
<template>
<div>
<header></header>
<nav></nav>
<app-view></app-view>
<footer></footer>
</div>
</template>
Finally, you can use the $_error()
method injected into all components. You can call it to display a specific error page.
{
path: '/profile/:username',
component: require('./views/Profile').default
}
<template>
<div>
<h1>404 Error</h1>
<p>The resource could not be found.</p>
<router-link to="/" exact>
Go to home page
</router-link>
</div>
</template>
import NotFound from './views/Errors/NotFound';
axios.get('/profile/' + this.$route.params.username)
.then((response) => {
// user was found
})
.catch((error) => {
if (error.response.status === 404) {
this.$_error(NotFound);
}
});
If you decided to define a resolver, you can directly specify the filename of the component like this this.$_error('NotFound')
.
Additionally, if you name your error components after status codes like this 404.vue
, you can trigger error pages like this this.$_error(404)
.
You can pass a payload as an additional argument to $_error()
.
this.$_error(404, {
username: this.$route.params.username
});
The payload will be available as a prop in the component.
<template>
<div>
<h1>404 Error</h1>
<p>User {{ payload.username }} not found.</p>
<router-link to="/" exact>
Go to home page
</router-link>
</div>
</template>
<script>
export default {
props: ['payload']
};
</script>
Please see CONTRIBUTING for details.
Released under the MIT License.