Details of a Product Vuejs

I want to show the details of a product, but I have not managed to show the information. I'm working with Vue Mongo Node and Express When I give http://localhost:3000/item/5aa811e5aa7f7d414c707127 appears the information of the database, but when I put it as a route to know more details of the product does not come out and says bundle.js:1320 GET http://localhost:3000/detailsitem/item/5aa811e5aa7f7d414c707127 404 (Not Found) that can not find it if there is information from the database. How can I show you the product information? I already have to recognize it by ID, but it's as if I did not recognize the api.

This is the main one.

<template>
  <div>

    <div class="row p-4">
      <div class="col-md-12">
        <h1 class="title">Juicilicious</h1>
        <router-link :to="{ name: 'CreateItem' }" class="btn btn-primary float-right mt-2 btn-create">
          Create Item
        </router-link>
      </div>
    </div><br />

    <table class="table table-hover table-bordered listado">
      <thead>
        <tr>
          <td>ID</td>
          <td>Item Name</td>
          <td>Item Category</td>
          <td>Item Image</td>
          <td>Actions</td>
        </tr>
      </thead>

      <tbody>
        <tr v-for="item in items">
          <td>{{ item._id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.category }}</td>
          <td><img class="item-image" :src="'../public/images/' + item.image " /></td>
          <td>
            <router-link :to="'/detailsitem/item/${item._id}'" class="btn btn-primary btn-create">View</router-link>




          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default{
    name:'app',
    data(){
      return {
        items:[]
      };
    },
    created: function (){
      var vm=this;
      axios.get('http://localhost:3000/item').then(function(response){
        console.log(response.data);
        vm.items=response.data;


      })
    }
  }
</script>

And this is the one of the details

<template>
    <div>
        <h1>Show Item</h1>
        <div class="row">
          <div class="col-md-10"></div>
          <div class="col-md-2"><router-link :to="{ name: 'DisplayItem' }" class="btn btn-create">Return to Items</router-link></div>
        </div>

        <form v-on:submit.prevent="updateItem">
            <div class="form-group">
                <label>Item Name</label>
                 <div>{{item.name}}</div>
            </div>

            <div class="form-group">
                <label name="product_price">Item Price</label>
               <div>{{item.price}}</div>
            </div>


        </form>
    </div>
</template>

<script>

    export default{
        data(){
            return {
        items:[]
      };
        },

        created: function(){
            this.getItem();
        },

        methods: {
            getItem()
            {
              let url = 'http://localhost:3000/item/' + this.$route.params.id;
                this.axios.get(url).then((response) => {
                    this.item = response.data;
                    console.log(response.data);
                });
            }
        }
    }
</script>

I also have these routes

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);


import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use (VueAxios, axios);

import App from './App.vue';

import DisplayItem from './components/displayitem.vue';
import CreateItem from './components/createitem.vue';
import DetailsItem from './components/detailsitem.vue'

const routes =[
{
  name:'DisplayItem',
  path:'/',
  component:DisplayItem
},

{
  name:'CreateItem',
  path: '/create/item',
  component:CreateItem
},

{
    name:'DetailsItem',
    path: '/detailsitem/item/:id',
    component: DetailsItem
}
];

const router = new VueRouter({
 mode: 'history', routes: routes
  });


new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
})

I appreciate the help!