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

 

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.





Navigation Component

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