Vue Router Tutorial: Part 1 (draft)

Vue Router is used to render pages of a vue application. We are already using components to change the view but if you need change a full page, or part of it, using vue router you can distinguish different views or pages from each other. By using this we can navigate between the web pages but without reloading a full page.

In this tutorial, we’ll setup a SPA that will show some information about products. We will create a few pages, like create, show, list products and link those pages using vue-router. You should already be familiar with Vue as well as creating and using Vue components.

I will show you how i like to structure all the components and pages of my projects…

Contents

Part1

• Setup
• Router Pattern
• Creating routes
• App.js
• Routes.js
• routes/index.js
• Creating MainPage
• Creating Product Page

Part 2

• Creating Product Create Page
• Creating Product List Page
• Creating Component Search Product (with Queries)
• Creating Component Detail Product
• Creating Product Show Page (with Params)

Setup

First we have to install Vue-Router, we will use the command line with npm

npm install vue-router

Now in app.js file should be like this:

import Router from "./routes";
Vue.component('Main', Main)
const app = new Vue({
    el: '#app',
    router: Router,
    render:h => h(App)
});

Router Pattern

I will add the “routes” folder, with 3 important files, this is just to create a pattern and slip by functionality, like this…

routes
|_____ index.js //first file open when call routes
|_______ middlewares.js // used to verify if user is logged or if have a role for authentication, not need for now
|__________ routes.js // here we will put ours routes

Creating routes

Thinking of what we will need to create, list, and show products

• need a page for list all the products
• need a page to create products
• need a page to show product

Example of how structure

What this have in common ??

we need to structure the project, so… what this pages have in common, perhaps a top menu to change between pages..

So… We will slipt by pages, slip components by model type , and move the main Componente to page folder. The folder pages is where we will have the pages of the vue-router.

Main page with menu (NavBar.vue), this menu will have links to create and list products, for now this 2 links in a menu is just what we need.

So each product will need to have a router to show the product with more details.

App.js

require('./bootstrap');
window.Vue = require('vue').default;
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
// import Main from './pages/Main'
import App from './components/App'
import Router from "./routes";
// Vue.component('Main', Main)
const app = new Vue({
    el: '#app',
    router: Router,
    render:h => h(App)
});

Routes.js

import { NotFound,Main,Product,ListProduct,CreateProduct,ShowProduct} from "../pages";
export const routes = [
    {
        name: "main",
        path: "/",
        components: { 
                default: Main,
            },
        meta: {
            role: 'user',
            requireAuth: true,
          },
        children: [              
             
            {
            
                path: 'product',
                component: Product,
                meta: {
                    role: 'user',
                    requireAuth: true,
                },
                 children: [   
                    {
                        name: "product",
                        path: '',
                        component: ListProduct,
                        meta: {
                            role: 'adminCompany',
                            requireAuth: true,
                        },
                        props: route => ({ ...route.query})
                    },    
                     {
                        name: 'createProduct',
                        path: 'create',
                        component: CreateProduct,
                        meta: {
                            role: 'adminCompany',
                            requireAuth: true,
                            },
                        },   
                    {
                        name: 'showProduct',
                        path: ':productId/',
                        component: ShowProduct,
                        meta: {
                            role: 'adminCompany',
                            requireAuth: true,
                        },
                         props: route => ({ ...route.query, ...route.params }),
},                     
                    
                ]    
                
            },
]
},
   
    {
        name: "NotFound",
        path :'*',
        component: NotFound,
    },
];

routes/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import { routes } from "./routes";
// import { checkAuthMiddleware,checkRoleAccessMiddleware } from './middlewares'
Vue.use(VueRouter);
const router = new VueRouter({ 
    routes,
    linkActiveClass: "active",
    mode: "history"
});
export default router;

Creating Main Page (and update router)

<template>
<div style="background-color:white;">
<NavBar/>
<h1>Main.vue</h1>
<transition name="slide-fade"> 
                        <router-view ></router-view>
                  </transition>
</div>
</template>  
  
<script>
import NavBar from "@/components/NavBar";
export default {
  name: "Main",
 components:{
      NavBar,
      
 },
 data(){
    return{
                  
    }
  },
computed : {
      // auth(){
      //           return Auth.query().first();
      //       },
      },
methods: {
},
mounted() {
      console.log('Component Main mounted.')
},
 created() {
      console.log(' Main created.')
},
}; 
</script>
<style >
</style>

Creating Product Page

<template>
<div>
<b-container fluid  class="vld-parent"  align-h="center" style=" padding: 0px; min-height: 80vh">
<h1>Product.vue</h1>
<transition  v-if="!loading " name="slide-fade">
            <router-view ></router-view>
        </transition>
</b-container>
</div>
</template>
  
<script>
export default {
    name: "Product",
    components: {
 
      
    },
    props: {
      
    },
    data() {
      return {        
            title: "Product",
            loading: false,
};
    },
 
    mounted () {
      console.log("Mounted Product.vue");
      }
  };
  </script>

Part 2

Vue Router Tutorial: Part 2 (draft)