Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

movie: [],

};

},

mounted() {

this.fetchMovie();

},

methods: {

async fetchMovie() {

return axios({

method: 'get',

url: `http://localhost:8081/api/movies/${this.$route.params.id}`,

})

.then((response) => {

this.movie = response.data;

})

.catch(() => {

});

},

},

};

</script>

We have added an axios request here to fetch the movie when a user clicks on the title of
the movie.

Now, we also need to define the routes to the page. So, in routes/index.js, replace the

content with the following:

import Vue from 'vue';

import Router from 'vue-router';

import Home from '@/components/Home';

import Contact from '@/components/Contact';

import AddMovie from '@/components/AddMovie';

import Register from '@/components/Register';

import Login from '@/components/Login';

import Movie from '@/components/Movie';

Vue.use(Router);

export default new Router({

mode: 'history',

routes: [

{

path: '/',

name: 'Home',

component: Home,

},