Router - senior-design-marketplace/vue-typescript-client GitHub Wiki
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.
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
- paths can also contain parameters using the
- 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.
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.
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.