Create 1 route for 2 urls ( one that has params and one that doesn't)-CodePudding

I'm trying to push a user through vue-router to one single route but in one case this route would have params and on the other case it wouldn't have params. When it has params, I would show other components inside the page. So everything depends on whether I have a param or not. But when I try that out I get an error and I can't really pass my params to the route. This is my route

    {
       path : '/template',
       name : 'Template',
       component : Template 

    },

I have a route that is /template that has no params. So it'd look like this :

 this.$router.push("/template")

And another one that has the same name with the same route but that has params

 this.$router.push({path : 'template', params:{ id }})

Yet, when I try to push the second one, it would ignore the values of the params. And I need these 2 routes to have shared components so it wouldn't be a good practice to have 2 routes with same components. Here is the error I'm getting Path "template" was passed with params but they will be ignored. Use a named route alongside params instead.

CodePudding user response：

Use query instead of params.

this.$router.push({path : 'template', query:{ id }})

<OtherComponent v-if="$route.query.id" />

CodePudding user response：

As simpel as

...
{
  path : '/template',
  name : 'Template',
  component : Template 
},
{
  path : '/template/:id',
  name : 'TemplateWithId',
  component : TemplateWithId
},
...