mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-30 09:27:13 +00:00
Add validate option
This commit is contained in:
parent
b3df306c30
commit
f8c7b5c012
@ -1,27 +1,4 @@
|
||||
module.exports = {
|
||||
router: {
|
||||
routes: {
|
||||
// author: {
|
||||
// alias: '/nuxt'
|
||||
// },
|
||||
// users: {
|
||||
// _id: {
|
||||
// regexp: ':id(\\d+)'
|
||||
// // generate: [1, 2, 3, 4] // Need to be finished on generate
|
||||
// }
|
||||
// },
|
||||
// posts: {
|
||||
// alias: '/articles'
|
||||
// }
|
||||
}
|
||||
},
|
||||
// generate: {
|
||||
// routeParams: {
|
||||
// '/guide/:slug': _(require('./static/docs/guide/menu.json')).values().flatten().map('to').compact().map((slug) => { return { slug: slug.replace(/^\//, '') } }).value(),
|
||||
// '/api/:slug': _(require('./static/docs/api/menu.json')).values().flatten().map('to').compact().map((slug) => { return { slug: slug.replace(/^\//, '') } }).value(),
|
||||
// '/examples/:slug': _(require('./static/docs/examples/menu.json')).values().flatten().map('to').compact().map((slug) => { return { slug: slug.replace(/^\//, '') } }).value()
|
||||
// }
|
||||
// },
|
||||
build: {
|
||||
vendor: ['axios']
|
||||
}
|
||||
|
@ -8,6 +8,14 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
validate ({ params }) {
|
||||
return /^[A-z]+$/.test(params.slug)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
p
|
||||
{
|
||||
|
@ -3,7 +3,7 @@
|
||||
<h1>Dynamic route example</h1>
|
||||
<h2>Projects list</h2>
|
||||
<p>
|
||||
<router-link :to="{ name: 'projects-slug', params: { slug: 'nuxt.js'} }">
|
||||
<router-link :to="{ name: 'projects-slug', params: { slug: 'nuxtjs'} }">
|
||||
Nuxt.js
|
||||
</router-link>
|
||||
</p>
|
||||
|
@ -70,6 +70,17 @@ function render (to, ___, next) {
|
||||
this.setTransition(Components[0].options.transition)
|
||||
this.error()
|
||||
let nextCalled = false
|
||||
let isValid = Components.some((Component) => {
|
||||
if (typeof Component.options.validate !== 'function') return true
|
||||
return Component.options.validate({
|
||||
params: to.params || {},
|
||||
query: to.query || {}
|
||||
})
|
||||
})
|
||||
if (!isValid) {
|
||||
this.error({ statusCode: 404, message: 'This page could not be found.', url: to.path })
|
||||
return next()
|
||||
}
|
||||
Promise.all(Components.map((Component) => {
|
||||
let promises = []
|
||||
const _next = function (path) {
|
||||
@ -78,6 +89,7 @@ function render (to, ___, next) {
|
||||
next(path)
|
||||
}
|
||||
const context = getContext({ to<%= (store ? ', store' : '') %>, isClient: true, next: _next.bind(this), error: this.error.bind(this) })
|
||||
// Validate method
|
||||
if (Component._data && typeof Component._data === 'function') {
|
||||
var promise = promisify(Component._data, context)
|
||||
promise.then((data) => {
|
||||
|
@ -6,22 +6,22 @@ import Router from 'vue-router'
|
||||
Vue.use(Router)
|
||||
|
||||
<%
|
||||
let components = []
|
||||
function recursiveRoutes(routes, tab) {
|
||||
let res = ''
|
||||
function recursiveRoutes(routes, tab, components) {
|
||||
var res = ''
|
||||
routes.forEach((route, i) => {
|
||||
components.push({ _name: route._name, component: route.component })
|
||||
res += tab + '{\n'
|
||||
res += tab + '\tpath: ' + JSON.stringify(route.path) + ',\n'
|
||||
res += tab + '\tcomponent: ' + route._name
|
||||
res += (route.name) ? ',\n\t' + tab + 'name: ' + JSON.stringify(route.name) : ''
|
||||
res += (route.children) ? ',\n\t' + tab + 'children: [\n' + recursiveRoutes(routes[i].children, tab + '\t\t') + '\n\t' + tab + ']' : ''
|
||||
res += (route.children) ? ',\n\t' + tab + 'children: [\n' + recursiveRoutes(routes[i].children, tab + '\t\t', components) + '\n\t' + tab + ']' : ''
|
||||
res += '\n' + tab + '}' + (i + 1 === routes.length ? '' : ',\n')
|
||||
})
|
||||
return res
|
||||
}
|
||||
let routes = recursiveRoutes(router.routes, '\t\t')
|
||||
uniqBy(components, '_name').forEach((route) => { %>
|
||||
var _components = []
|
||||
var _routes = recursiveRoutes(router.routes, '\t\t', _components)
|
||||
uniqBy(_components, '_name').forEach((route) => { %>
|
||||
const <%= route._name %> = process.BROWSER_BUILD ? () => System.import('<%= route.component %>') : require('<%= route.component %>')
|
||||
<% }) %>
|
||||
|
||||
@ -49,6 +49,6 @@ export default new Router({
|
||||
linkActiveClass: '<%= router.linkActiveClass %>',
|
||||
scrollBehavior,
|
||||
routes: [
|
||||
<%= routes %>
|
||||
<%= _routes %>
|
||||
]
|
||||
})
|
||||
|
@ -60,8 +60,8 @@ export default context => {
|
||||
<% } %>
|
||||
return promise
|
||||
.then(() => {
|
||||
// Call data & fetch hooks on components matched by the route.
|
||||
return Promise.all(Components.map((Component) => {
|
||||
// Sanitize Components
|
||||
Components = Components.map((Component) => {
|
||||
let promises = []
|
||||
if (!Component.options) {
|
||||
Component = Vue.extend(Component)
|
||||
@ -70,6 +70,24 @@ export default context => {
|
||||
Component._Ctor = Component
|
||||
Component.extendOptions = Component.options
|
||||
}
|
||||
return Component
|
||||
})
|
||||
// Call .validate()
|
||||
let isValid = Components.some((Component) => {
|
||||
if (typeof Component.options.validate !== 'function') return true
|
||||
return Component.options.validate({
|
||||
params: context.route.params || {},
|
||||
query: context.route.query || {}
|
||||
})
|
||||
})
|
||||
if (!isValid) {
|
||||
// Call the 404 error by making the Components array empty
|
||||
Components = []
|
||||
return _app
|
||||
}
|
||||
// Call data & fetch hooks on components matched by the route.
|
||||
return Promise.all(Components.map((Component) => {
|
||||
let promises = []
|
||||
const ctx = getContext(context)
|
||||
if (Component.options.data && typeof Component.options.data === 'function') {
|
||||
Component._data = Component.options.data
|
||||
|
Loading…
Reference in New Issue
Block a user