Full-Stack Web Development with Go by Nanik Tolaram & Nick Glynn

Author:Nanik Tolaram & Nick Glynn
Language: eng
Format: epub
Publisher: Packt
Published: 2023-11-15T00:00:00+00:00

Figure 7.5: Router sample application

The App.vue file contains the Vue Router information, which can be seen as follows:

<template> <div id="routerdiv"> <table> ... <router-link :to="{ name: 'Home'}">Home </router-link> ... <router-link :to="{ name: 'Login'}">Login </router-link> ... </table> <router-view></router-view> </div> </template>

The preceding router-link route is defined inside router/index.js, as shown:

const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/login', name: 'Login', component: Login }, ];

The <router-link/> tag defines the router configuration that the application has, and in our case, this is pointing to the Home and Login components declared inside the index.js file under the router folder, as shown:

import Vue from 'vue'; import { createRouter, createWebHashHistory } from 'vue-router' import Home from '../views/Home.vue'; import Login from "../views/Login.vue"; Vue.use(VueRouter); const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/login', name: 'Login', component: Login }, ]; const router = createRouter({ history: createWebHashHistory(), base: process.env.BASE_URL, routes }) export default router

Each of the defined routes is mapped to its respective components, which are the Home and Login components, which can be found inside the views folder.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.