React

react-router takes a different approach (called “dynamic routing”) as to when/where to apply the routing configuration. Its Router library provides routing-related components and you add them within the template (JSX code). The configuration (mapping of paths to components) is specified using directives within the template.

Vue

For a Vue app, the routing configuration is specified within main.js where the app is initialized.

./src/main.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

import Vue from'vue'

import VueRouter from'vue-router'

import App from'./App.vue'

import Dashboard from'./components/Dashboard.vue'

import Tasks from'./components/Tasks.vue'

import TaskDetail from'./components/TaskDetail.vue'

import PageNotFound from'./components/PageNotFound.vue'

Vue.config.productionTip=false;

Vue.use(VueRouter);

constroutes=[

{path:'/',redirect:'/dashboard'},

{path:'/dashboard',component:Dashboard},

{path:'/tasks',component:Tasks},

{path:'/detail/:id',component:TaskDetail},

{path:'*',component:PageNotFound}

];

constrouter=newVueRouter({

mode:'history',

routes

});

newVue({

render:h=>h(App),

router

}).$mount('#app')

./src/App.vue

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<template>

<div id="app">

<h1>Routing App</h1>

<nav>

<router-link to="/dashboard">Dashboard</router-link>|

<router-link to="/tasks">Tasks</router-link>

</nav>

<router-view></router-view>

</div>

</template>

<script>

exportdefault{}

</script>

./src/components/Dashboard.vue

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<template>

<div class="due-today">

<h3>Due Soon</h3>

<ulv-if="tasks && tasks.length > 0">

<liv-for="(task) in tasks"

v-bind:key="task.id">

<router-linkv-bind:to="'/detail/' + task.id">

{{task.title}}

</router-link>{{task.dueDate}}

</li>

</ul>

<templatev-else>

<p>Alldone!</p>

</template>

</div>

</template>

<script>

import taskService from'./../taskService';

exportdefault{

data(){

return{

tasks:[]

}

},

mounted(){

constmaxNumberOfTasks=3;

taskService.getTasks(maxNumberOfTasks)

.then(result=>{

this.tasks=result;

});

}

}

</script>

./src/components/TaskDetail.vue

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<template>

<divv-if="task"class="task-detail">

<h2>{{task.title}}</h2>

<p>Due date:{{task.dueDate}}</p>

<p>Note:{{task.note}}</p>

</div>

</template>

<script>

import taskService from'./../taskService';

exportdefault{

data(){

return{

task:null

}

},

mounted(){

constid=+this.$route.params.id;

taskService.getTask(id)

.then(result=>{

this.task=result;

});

}

}

</script>

Angular’s and Vue’s routes are configured as part of initialization of the app; it happens before any of the components are rendered. React’s react-routers provides its functionalities via components–the same component concept that you use to declare a view. In a React app, you will see the declaration of router and routes within app components (whether it’s the top-level or a lower-level component). In Angular and Vue, the code pertaining to the router module and the routes don’t intermingle with that of components.

Routes definition. (Left to right: Angular, React, Vue)

To display the active view, Angular and Vue use a placeholder directive (router-outlet and router-view, respectively) while react-router uses the same route components to define route mapping and render the selected view.