If a page has fetch
method which invokes redirect
immediately (e.g. rejecting users without required permissions), that page is still rendered internally for no reason. This happens in nuxt@1.0.0-rc11.
This is however not happening if the same logic is moved to the middleware. It requires a developer to create separate single-use middleware even for ad-hoc page-specific logic.
Create pages/test.vue
:
<template>
<div>
This will crash: {{ noSuchVar }}
</div>
</template>
<script>
export default {
fetch ({ redirect }) {
return redirect('/')
},
}
</script>
Result: opening http://localhost:3000/test immediately redirects to http://localhost:3000 but the following is printed to stderr:
[Vue warn]: Property or method "noSuchVar" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in
the data option.
found in
---> <Client/pages/test.vue> at client/pages/test.vue
<Nuxt> at .nuxt/components/nuxt.vue
<Default> at client/layouts/default.vue
<Root>
Create pages/test2.vue
:
<template>
<div>
This will not crash: {{ noSuchVar }}
</div>
</template>
<script>
export default {
middleware: 'test',
}
</script>
and middleware/test.vue
:
export default function ({ redirect }) {
return redirect('/')
}
Result: opening http://localhost:3000/test immediately redirects to http://localhost:3000 and no errors are produced.
The two experiments behave identically (no errors are produced in either case).
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1665">#c1665</a>)</em></sub></div>