Router

To add new route for our TODO app update Application\src\router.js:

import Vue from 'vue';
import Router from 'vue-router';
import SignInView from '@/views/SignInView';
import SignUpView from '@/views/SignUpView';
import ForgotPasswordView from '@/views/ForgotPasswordView';
import DashboardView from '@/views/DashboardView';
import ListView from '@/views/ListView';
import TodoView from '@/views/TodoView';
import TableView from '@/views/TableView';
import CatalogView from '@/views/CatalogView';

Vue.use(Router);

export default new Router({
    routes: [
        { name: 'signin', path: '/signin', component: SignInView },
        { name: 'signup', path: '/signup', component: SignUpView },
        { name: 'forgot-password', path: '/forgot-password', component: ForgotPasswordView },
        { name: 'dashboard', path: '/', component: DashboardView },
        { name: 'list', path: '/list', component: ListView },
        { name: 'todo', path: '/todo', component: TodoView },
        { name: 'table', path: '/table', component: TableView },
        { name: 'catalog', path: '/catalog/:id?', component: CatalogView },
        { path: '*', redirect: '/' }
    ]
});

You will also need to add method to Application\src\store\modules\dashboard.js for opening our view:

// actions
const actions = {
   ...
    openTodo() {
        router.push({
            name: 'todo'
        });
    }
};

And finally add new button to Application\src\views\DashboardView.vue:

<template>
    <div class="DashboardView__container">
        <ThePage :class-name="'DashboardView'">
            ...
            <div class="DashboardView__body">

                ...

                <!--TODO-->
                <DashboardItem :name="'TODO__TITLE'"
                               :icon="'icon-ok'"
                               @click="openTodo" />

            </div>
        </ThePage>
		...
    </div>
</template>

<script>
    ...

    export default {
        ...
        methods: {
            ...mapActions({
                openConfiguration: 'configuration/open',
                openList: 'dashboard/openList',
                openForm: 'form/open',
                openTable: 'dashboard/openTable',
                openCatalog: 'dashboard/openCatalog',
                openTodo: 'dashboard/openTodo'
            })
        }
    };
</script>

As a result you will get this:

An image

# Router

Router