Add Routing into a existing Vue App

I build a small app and using was ok to handle each use situation, but now I need to add routing to my existing app, then let’s go.

Install the router

1-Add the router into my app using the vue-cli for add router plugin and also it will modify a few files to register a basic template with routes for my app and also create Home and About into the views directory.

C:\Users\dany\Desktop\vue-course\hellostore>vue add router

�📦 Installing @vue/cli-plugin-router...

+ @vue/cli-plugin-router@4.2.2
updated 1 package and audited 25973 packages in 15.977s

43 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

✔ Successfully installed plugin: @vue/cli-plugin-router

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

�🚀 Invoking generator for @vue/cli-plugin-router...
�📦 Installing additional dependencies...

added 1 package from 1 contributor and audited 25974 packages in 15.679s

43 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

⚓ Running completion hooks...

✔ Successfully invoked generator for plugin: @vue/cli-plugin-router
The following files have been updated / added:

src/router/index.js
src/views/About.vue
src/views/Home.vue
package-lock.json
package.json
src/App.vue
src/main.js

You should review these changes with git diff and commit them.
The main.js was modified and the vue-cli import the router and also add the router into the vue instance.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");</pre>

The router file

The CLI configure to add the router into the vue instance, enable history mode in the address url don’t will use # routing, set the default route that means the root path will load.

I’m only import the Home.vue because the others Pages(componets)
will be load async.

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },

  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  },

  {
    path: "/favorites",
    name: "Favorites",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Favorites.vue")
  }

];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});
export default router;

The App.vue

Using I can load each component defined in the router and can be accessed using the navigation component.

  <div id="app">
    <navigation />
    <router-view />
  </div>
</template>
<script>
import navigation from "@/components/Navigation";
export default {
  name: "App",
  components: {
    navigation: navigation
  }
};

</script>

Navigation Component

Add some navigation component for able to navigate throw the links and areas.

  <div class="nav">
    <div class="nav__logo">
      <span>logo</span>
    </div>
    <div class="nav__menu">
      <router-link to="/">Home</router-link> |
      <router-link to="/favorites">Favorites</router-link>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.nav {
  display: grid;
  grid-template-columns: 50% auto;
  align-content: center;
  &__logo {
    padding: 5px;
    background-color: aquamarine;
  }
  &__menu {
    background-color: brown;
  }
  a.router-link-exact-active {
    font-weight: bolder;
  }
}