Add Routing into a existing Vue App

March 14, 2020

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.

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");

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.

<script>
import navigation from "@/components/Navigation";
export default {
  name: "App",
  components: {
    navigation: navigation
  }
};
<div></div>
</script>

Navigation Component

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

<script>
export default {};
</script>


 .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;
  }
}