Based on the information provided in the documentation, I learned that I can extract parameters from the URL and pass them as a parameter to the component. To know more, refer to this link: https://router.vuejs.org/guide/essentials/passing-props.html#function-mode
I attempted it by following this code snippet:
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
var router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: App, props: (route) => ({ query: route.query.q }) }
]
})
new Vue({
router,
el: '#app',
render: h => h(App),
})
In my App.vue file, I added the following code:
<script>
export default {
name: 'app',
data () {
return {
}
},
mounted: function() {
console.log(this.query)
},
}
</script>
However, when checking the console, I found "undefined" displayed. Can someone please guide me on how to correctly retrieve parameters from the URL?