I’m trying to get some params from my route in a vue page so I have the following:
<script lang="ts">
import { defineComponent } from 'vue';
import { useRoute } from 'vue-router';
export default defineComponent({
setup() {
const route = useRoute();
return {
route,
};
},
name: 'ErrorPage',
data() {
return {
errorCode: this.route.params.errorCode,
};
},
});
</script>
but my compiler is failing with the error
Property ‘params’ does not exist on type ‘Function’.
Is there a way to make this work?
I have also tried using this.$route.params.errorCode
without the setup, but get the same error
>Solution :
There is a params
property directly on the route
object that it returned by the useRoute
function. You can use that to access the params in your url.
// ErrorComponent.vue
/* ... */
setup() {
const route = useRoute();
const errorCode = ref(route.params.errorCode);
return {
route,
errorCode
};
},
/** ... **/
Also, make sure that the parameter is correctly defined in your router config:
// router.js
/** ... **/
{
path: "error/:errorCode",
component: ErroComponent,
name: "TheErrorRoute"
},
/** ... **/
As a side note, you should avoid mixing the composition API and the options API, in a single component. My answer considers that you want to use the composition API.