Router - senior-design-marketplace/vue-typescript-client GitHub Wiki

Basics

The web app is a single page application that utilizes vue router. The header is a static component that sits above a dynamic router view. More info about vue router can be found here.

Router.ts

The router.ts file allows for content to be exchanged within the singular page.
A general rundown of the structure of this file is as follows:
The routes array contains objects of each of the routes contained in the router. Within each object is the path, name, keepAlive flag, and the component.

  • Path: path of the route that shows in the address bar
    • paths can also contain parameters using the :param notation within the path
  • Name: unique name for the route that can be used to redirect to the route
  • keepAlive: if true, the router will save the state of the component for the full duration the user is on the web page
  • Component: component that is rendered below the header
    • All components that are used in this manner are located in the src/views directory.

Linking to a Route

Navigation in HTML templates:

The most simple way of linking to a page is to use the v-btn component with a to prop. A simple example of this would be:
<v-btn to="/dashboard">Dashboard</v-btn> When clicked, this would take the user to the dashboard route.
If you don't want to use a button for some reason, you can also use a router-link component:
<router-link to="/">Go to Home</router-link> This would display text that would take the user to the Home route when clicked.

Programmatic Navigation:

The main way of changing the route is to push a path to the router that is available throughout all components. Here is one example of doing this:
this.$router.push(`/project/${this.projectId}`); Assuming that projectId is defined in your component, this would tell the router to redirect to a project's page corresponding to the id matching projectId.
As a side note, you can use this within an HTML template like so:
<v-btn icon @click="$router.push('/project/${projectId}')"> This can be useful if you need additional functionality or error handling that programmatic navigation provides, but do not want to create a separate method for that specific button. Note: You do not need the this notation when working within the HTML template.

⚠️ **GitHub.com Fallback** ⚠️