9.8.2 Routing for Single Page Applications - caligrafy/caligrafy-quill GitHub Wiki

When we looked at the integration from an educational perspective, we identified 2 types of routes: Data Routes and Page Routes. In small scale applications, prototypes or other smaller educational projects, both types could be handled by the Caligrafy server-side.

Learn more about Basic Routing when using Caligrafy and Vue for prototypes and learning purpose

In larger scale applications, when Vue is used in tandem with Caligrafy, we need to make sure to leverage the full capabilities of both frameworks. In order to get the most out of Single Page Application (SPA) and Single File Components (SFC) that make Vue powerful, the Page Routes must be handled by the client-side.

Data Routes are api routes that are meant to establish HTTP requests to retrieve information from the server or to send commands to it and return a response to be rendered on the browser.

When Vue is being used, the Caligrafy server-side will continue to handle these routes. This is very similar to creating a REST-ful API with Caligrafy.

Learn more about how Caligrafy does it

• Caligrafy Routing
• REST-ful APIs

One of the most powerful features of javascript frameworks like Vue is their ability to create Single Page Applications (SPA). Single Page Applications means that the entire application is contained in one HTML page. In order to achieve that, Page Routing becomes key as there is still a need to address what users see on the screen from the URL. That type of routing is less about switching HTML pages and more about making sure to toggle content on one page based on the URL that a user types in the browser.

In the Vue project created, the router/index.js is where the routes are defined.

There are 2 types of routes that we would like to distinguish:

1. Basic Routes The basic route is defined by:

• path: the path that would be entered in the browser
• component: the "page" that it would point to but since Vue is a Single Page Application, the "page" is a component that has a block of content. The component is defined elsewhere, outside of main.js, thus the need to make sure that all the components referenced in main.js are also imported.
• name: alias that would make it easy to call the link to these routes by their names

import HomePage from '../components/pages/HomePage.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage
    }
  ]
})

We will learn more about components in the next chapter.

2. Routing with parameters

It is not unusual to want to capture variables from the URI to act on them. For example if you want to access all the information on a specific book, you would want the URI to be http://your-app/books/1 where 1 is the id of the book that you want.

In order to do that, you need to use `:variable_name syntax:

   { 
     path: '/:variablename', 
     component: NamePage, 
     name: 'pagename' 
   }

In order to capture the parameter and use it in the page NamePage, it can be done in 2 ways:

• $route: the global variable $route can be accessed from all the components. The parameter can be fetched by calling this.$route.params.variablename

• props: the variablename can be passed to the component as a property by changing the definition and setting the props attribute to true. Doing so, will make the variablename accessible and usable instantly by the page

   { 
     path: '/:variablename', 
     component: NamePage, 
     name: 'pagename', 
     props: true 
   }

We will learn more about props when we explain Single File Components (SFC) further

Next Section: Single File Components (SFC)