Within my Vue.js project, I am utilizing params in my navigation.vue component to pass data onto the next page for dynamic routing purposes. Below is an example of how I am using this:
<router-link tag="p"
:to="{name: 'Main', params: {category: link.linkCategory}}"
:key="link.linkCategory">
The code snippet below is a part of my router index.js:
export default [
{
path: '/origin/:category',
name: 'origin',
component: () => import('@/views/origin/origin.vue'),
props: true,
children: [
{
path: '',
name: 'Main',
props: true,
component: () => import('@/views/origin/Main.vue')
}
Essentially, I am passing the 'category' value as a param for dynamic routing. However, I encounter a warning message in the console whenever I try to access it through the router-link:
[vue-router] missing param for named route "Main": Expected "category" to be defined
All the linkCategory values are stored in a separate JavaScript file for convenience, and the routing successfully retrieves the values when each link is clicked. While all pages are routing correctly, the console warnings are disruptive...
Although I understand that the parameter will be empty before accessing the router-link, I need a solution to address these warnings. I even attempted using the 'v-if' method, but it did not resolve the issue.
I would appreciate it if someone could help me identify and rectify any mistakes in my code.