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';


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() {
            name: 'todo'

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



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


                <DashboardItem :name="'TODO__TITLE'"
                               @click="openTodo" />



    export default {
        methods: {
                openConfiguration: 'configuration/open',
                openList: 'dashboard/openList',
                openForm: 'form/open',
                openTable: 'dashboard/openTable',
                openCatalog: 'dashboard/openCatalog',
                openTodo: 'dashboard/openTodo'

As a result you will get this:

An image