VueRouter this.$route.query always empty

Question

I'm trying to get the query param code, but $route.query is always empty. I've used function mode per the docs. What is missing?

Router:

// use vue-router
import Router from 'vue-router'
Vue.use(Router)

// create router
const router = new Router({
  routes: [
    {
      path: '/',
      component: Home,
      props: (route) => ({ code: route.query.code })
    }
  ]
})

Home.vue

<template>
  <div>
    <Navbar />
      <FlatHeader />
      <v-content>
        <ComingSoon />
        <Changes />
        <EmailSubscribe />   
      </v-content>
    <AuthorizationModal />
  </div> 
</template>

<script>
import AuthorizationModal from './components/AuthorizationModal';
import FlatHeader from './components/FlatHeader';
import ComingSoon from './components/ComingSoon';
import Changes from './components/Changes';
import EmailSubscribe from './components/EmailSubscribe';

export default {
  name: 'Home',
  components: {
    FlatHeader,
    ComingSoon,
    Changes,
    EmailSubscribe,
    AuthorizationModal
  },
  props: {
    code: {
      type: String,
      default: null
    }
  },
  methods: {
  },
  mounted() {
    console.log(this.$route)
  }
}

</script>

$route console output:

Answer 1

I resolved this by setting the mode on Router to 'history'.

Router:

// create router
const router = new Router({
  mode: 'history', // add 'history' mode
  routes: [
    {
      path: '/',
      component: Home,
      props: (route) => ({ code: route.query.code })
    }
  ]
})