Vue Router - params not being passed

Question

I cannot seem to pass the params using Programmatic navigation, the path changes but there is an empty object params.

main.js

import Vue from 'vue';
  import VueRouter from 'vue-router';

  import App from './App.vue';

  const Hello = { props: ['name'], 
  template: `<h1>Hello {{$route.params}}  </h1>`,

  };
  const World = { template: `<h1>World</h1>`};

  const routes = [
    { path: '/hello', component: Hello, props: true },
    { path: '/world', component: World }
  ];

  const router = new VueRouter({
    routes
  });

  Vue.use(VueRouter);

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

app.vue

<template>
  <div id="app">
   {{ msg }}
   <button @click="move">werwer</button>
       <router-view/>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
  },
  methods : {
    move() {
    this.$router.push({ path: '/hello', params: { name: 'Paul' } })
    }
  }
}
</script>

Answer 1

It appears that when doing it this way you have to use named routes.

So programmatically pushing

this.$router.push({ name: 'hello', params: { name: 'Paul' }}) 

and in the definition

 const routes = [
    { name: 'hello', path: '/hello/', component: Hello, props: true },
    { path: '/world', component: World }
  ];