wildcard route

Author: danielabar

README.md

@@ -30,6 +30,7 @@
     - [Redirect](#redirect)
     - [Route Parameters](#route-parameters)
     - [Route Query and Name](#route-query-and-name)
+    - [Wildcard Route](#wildcard-route)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -634,3 +635,11 @@ However, now clicking on Mobile link in app, this shows up in url: `http://local
 The json got encoded and placed in url. To fix this, put `:` in front of `to` attribute of `<router-link>`: `<router-link class="nav-item is-tab" :to="{name: 'category', params: {id: 'mobile'}}">Mobile</router-link>`
 
 Now Vue can parse the section rather than adding it as a string to url.
+
+### Wildcard Route
+
+For example, to create 404 page for all paths that aren't explicitly handled, use wildcard route, linking it to any component you wish, in this example, [NotFound](src/theme/NotFound.vue) which simply displays an error message:
+
+```javascript
+{path: '*', component: NotFound}
+```

src/router.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Category from './theme/Category.vue'
 import Login from './theme/Login.vue'
+import NotFound from './theme/NotFound.vue'
 
 // connect VueRouter plugin with Vue configuration
 Vue.use(VueRouter)
@@ -21,7 +22,8 @@ const router = new VueRouter({
   routes: [
     {path: '/login', component: Login},
     {path: '/category/:id', name: 'category', component: Category},
-    {path: '/', redirect: '/category/front-end'}
+    {path: '/', redirect: '/category/front-end'},
+    {path: '*', component: NotFound}
   ]
 })
 

src/theme/NotFound.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="error">Oops, page not found!</div>
+</template>