Add validate option

examples/custom-routes/nuxt.config.js

@@ -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']
   }

examples/custom-routes/pages/projects/_slug.vue

@@ -8,6 +8,14 @@
   </div>
 </template>
 
+<script>
+export default {
+  validate ({ params }) {
+    return /^[A-z]+$/.test(params.slug)
+  }
+}
+</script>
+
 <style scoped>
 p
 {

examples/custom-routes/pages/projects/index.vue

@@ -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>

lib/app/client.js

@@ -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) => {

lib/app/router.js

@@ -6,22 +6,22 @@ import Router from 'vue-router'
 Vue.use(Router)
 
 <%
-let components = []
+function recursiveRoutes(routes, tab, components) {
-function recursiveRoutes(routes, tab) {
+  var res = ''
-  let 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')
+var _components = []
-uniqBy(components, '_name').forEach((route) => { %>
+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 %>
   ]
 })

lib/app/server.js

@@ -60,8 +60,8 @@ export default context => {
   <% } %>
   return promise
   .then(() => {
-    // Call data & fetch hooks on components matched by the route.
+    // Sanitize Components
-    return Promise.all(Components.map((Component) => {
+    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