VueJS 道具不会通过路由器链接传递给组件

Question

I have the following link in a VueJS component:

 <router-link :to="{ name: 'time', props: { tax: 123, site: site_key }}">Add New Request</router-link>

The Time component has the following code, its always showing the default, instead of the value:

<template>
  <div>t {{ tax }} {{site}}</div>
</template>

<script>
    export default {
        name: "Time",
        props: {
            tax: {
                type: String,
                default: 'Vue!'
            },
            site: {
                type: String,
                default: 'Vue!'
            }

        }
    }
</script>

EDITED

const router = new Router({
  routes: [
    {
      path: '/',
      name:'home',
      component: Home,
    },
    {
      path: '/time',
      name:'time',
      component: Time,
      props: { tax: null, site: null }
    },
  ]
})

Answer 1

As seen in Vue Router :

https://router.vuejs.org/guide/essentials/passing-props.html

Props are passed by the params field, so like this :

<router-link :to="{ name: 'time', params: { tax: 123, site: site_key }}">Add New Request</router-link>

for a much more insight on your problem, please include your router.js file.