Customize link on inertia reloading page when no html property specified

[anony253]

I have used custom link exactly as described in the guide, and pages are now loading with inertia, which is absolutely brilliant.

I have opted not to use html property on menu items which contain children, so page wouldn't reload before dropdown is rendered. This is exactly what is happening when using this customized link. There is no html property on an item, but when I click it, I can see a get request to a server, and page gets re-rendered before children are rendered.

So in example below, when clicked on Users, page is refreshed instead of children appearing

menu: [
  {
    header: 'App Navigation',
    hiddenOnCollapse: true
  },
  {
    title: 'Users',
    child: [
      {
        href: route('users.index'),
        title: 'Users'
      },
      {
        href: route('users.index'),
        title: 'User Groups'
      },
      {
        href: route('users.index'),
        title: 'API'
      }
    ]
  }
]

P.S. Thanks very much for such a great product, and keep up the good work :)

[yaminncco]

make a conditional render when href is not defined

const customLink = {
  props: ['item'],
  render() {
    return h(this.item.href ? link : 'a', {}, this.$slots)
  }
}

also i recommend to use persistent layouts

[anony253]

Thanks, working fine :D