Help with Named Routes and Parameters

digiproduct

I’m trying to pass 2 parameters via a route-link to the child component.

I’ve spent several hours reading various google posts, Vue docs, and reviewing the various courses I have on Vue … and trying several different methods … and haven’t yet managed to get any of them to work.

None of the examples I found anywhere had children in the routes as is done in the route.js for Quasar for lazy-loading … so maybe that is the complication that I’m getting incorrect when I’m trying to do this.

I’m using Quasar CLI V1 Beta21

In my parent component, there is an array called contacts, which gets filled from an Axios call, and one of the fields that comes back is the id field … a number. There is also a string called profileTab which is set.

These are the 2 parameters which I wish to pass.

In my child component, I have

export default {
  name: "leadProfile",
  props: {
    leadId: Number,
    startTab: String
  },

In my parent component script section, I have


export default {
  name: "PageIndex",
  data() {
    return {
      contacts: [],
      profileTab: "profile",
      activityTab: "activity",

and, in my parent component template, I have the route-link defined as follows …

  <router-link
    to="{ name: 'leadProfile', params: {leadId: 'contact.id', startTab: 'profileTab'} }"
    tag="span"
  >

In my routes.js file I have the following …

const routes = [
  {
    path: '/leadprofile',
    name: 'leadProfile',
    component: () => import('layouts/TotallyBooked.vue'),
    children: [
      { path: '', name: 'leadProfile', props: true, component: () => import('pages/LeadProfile.vue') }
    ]
  },

This gives me the following error in the console … and does not render … as the error message states it will not do …

vue-router.esm.js?8c4f:16 [vue-router] Named Route 'leadProfile' has a default child route. When navigating to this named route (:to="{name: 'leadProfile'"), the default child route will not be rendered. Remove the name from this route and use the name of the default child route for named links instead.

So, I try moving the name to the children array as follows …

  {
    path: '/leadprofile',
    component: () => import('layouts/TotallyBooked.vue'),
    children: [
      { path: '', name: 'leadProfile', props: true, component: () => import('pages/LeadProfile.vue') }
    ]
  },

and now, I no longer get any errors, but it still does not render … so I’ve still got something wrong …

Can anyone help me understand my mistake?

metalsadman

@digiproduct for routes with named views, you have to define the props option for each named view. see how to do it here -> https://router.vuejs.org/guide/essentials/passing-props.html#passing-props-to-route-components.

digiproduct

@metalsadman I’ll try that … thanks

Just leaving home with the kids but back in a couple of hours so I’ll give it a go then.

digiproduct

@metalsadman That’s one of the many pages I looked at during my hours of research … it mentions name but never actually includes name in the example

metalsadman

@digiproduct try doing what the error message suggests. Remove the name from this route and use the name of the default child route for named links instead

digiproduct

@metalsadman But isn’t that what I’ve got

{
    path: '/leadprofile',
    component: () => import('layouts/TotallyBooked.vue'),
    children: [
      { path: '', name: 'leadProfile', props: true, component: () => import('pages/LeadProfile.vue') }
    ]
  },

digiproduct

@metalsadman No, I’ve got props=true in a slightly different position

Got to dash … wish I didn’t … will try more on my return … thanks for your help

digiproduct

@metalsadman Thanks for the pointer … it helped me solve this … I have it working now and will post information about my corrected code later when I have had time to document it a little.

Appreciate your help.

amoss

@digiproduct I hope you’ll find the time soon, I was just wondering about a similar issue and sharing what you did might have helped me. Thanks.

metalsadman

@amoss there’s plenty of answer to this, if you like passing props using to props you will have to ise named routes. Check vue router docs, or the answers from vue forums or s.o.

amoss

That’s what I’m after and along my searches I got to this question.
If he had updated with his solution, this might have been the last place I’d search.
This is what these forums are for…

metalsadman

@amoss he had judging from his last post, now why he hasn’t posted it yet is up to him. i’m just giving you option where to look for, as this is generally related to how vue-router works and not specific to quasar. answer like this one is related to op’s question https://forum.vuejs.org/t/passing-props-through-router-link-solved/16868/5, and ofc by understanding the vue-router docs which i linked above.

No More Posting New Topics!

Help with Named Routes and Parameters