Vue路由器 - 未传递参数

Question

我似乎无法使用编程导航传递参数，路径更改但有一个空对象参数。

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

看来，这样做时，您必须使用命名路由。

所以以编程方式推送

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

在定义中

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