Paulund
2017-03-25 #vuejs-wordpress #vuejs

Setup The WordPress Routes

With the styling for the theme setup and ready to go we can set up the routing for the WordPress theme. In a normal WordPress build, this is the section where you will setup the permalinks for your WordPress site. It's important to have your permalinks correct as these will be used by the search engines to index your pages and can improve your SEO.

We don't want the links to be something like example.com/{POST_ID} we need it to be a bit more user-friendly and have the post name in the url like example.com/post-name. We can then take this post-name slug and using the WordPress REST API we'll need to search for the post via the slug. As it's a WordPress theme the majority of the routes can be dynamic but we might need some routes that are exact match URLs, both these scenarios are very easy to achieve using the VueJS router. Using our original VueJS project setup the router file is located at vue-wordpress-theme/src/router/index.js. When you first load the file you'll notice that the Vue router is already configured to use we just need to setup the routes for the project.


import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

If you haven't used Vue router before I've done a quick explanation post in a previous tutorial about the VueJS router. ## History Mode

The first thing I like to do with the router is to turn on the HTML5 history mode, this will remove the hash from the URL and make all the URLs look a bit more like you're used to. To do this you need to set the mode on the router.


export default new Router({
  mode: 'history'
})

Add Page Routes

If you've used something like Laravel before you'll understand how you need to setup the routes for your application and this is no different. First, we need to work out what pages we need. - Homepage

  • About
  • Contact
  • Author
  • Search results
  • Single Posts
  • 404 page

Before we can add the routes, we need to create the VueJS components for the pages, this is because when VueJS router changes URL it will replace the current component in the router-view tag and switch it with the component listed in the router file. When they've been created we need to import them into the file.

import Homepage from '@/components/pages/Homepage.vue'
import Single from '@/components/pages/Post.vue'
import Page from '@/components/pages/Page.vue'
import CategoryPage from '@/components/pages/CategoryPage.vue'
import Author from '@/components/pages/Author.vue'
import Search from '@/components/pages/Search.vue'
import NotFoundPage from '@/components/pages/404.vue'

After these components are imported onto the page we can use them on the defined routes. import Vue from 'vue' import Router from 'vue-router'


import Homepage from '@/components/pages/Homepage.vue'
import Single from '@/components/pages/Post.vue'
import Page from '@/components/pages/Page.vue'
import CategoryPage from '@/components/pages/CategoryPage.vue'
import Author from '@/components/pages/Author.vue'
import Search from '@/components/pages/Search.vue'
import NotFoundPage from '@/components/pages/404.vue'


 Vue.use(Router) 

export default new Router({ mode: 'history', routes: \[ { path: '/', name: 'Homepage', component: Homepage }, { name: 'About', path: '/about', component: Page }, { name: 'Contact', path: '/contactform', component: Page }, { name: 'Category', path: '/c/:categorySlug', component: CategoryPage }, { name: 'Author', path: '/author/:authorId', component: Author }, { name: 'Search', path: '/search/:searchTerm', component: Search }, { name: 'post', path: '/:postSlug', component: Single }, { name: 'NotFound', path: '\*', component: NotFoundPage } \] })

You'll notice that there are a few links that start with : this defines a dynamic route so now an URL like example.com/some-random-text this will match the post route and therefore display the Single component. At the bottom of the routes we have a NotFound route that will match everything and display the NotFoundPage which is the 404 page. The order of the routes is very important as this is the order that VueJS will attempt to match the URLs, this is why you should place exact match URLs at the top, dynamic URLs next then match all URLs at the bottom.