Quasar: Drawer links not working in history mode

[laurentpayot]

Hello, v0.8 is great. But quasar-drawer-link are not working within the drawer when the router is in history mode. With quasar dev as well as with Firebase hosting (with SPA rewrites to /index.html). Also $router.push(...) are not working within the drawer. Direct router-link from a "view" are working.
You can see all this by cloning this example repo: https://github.com/laurentpayot/quasar-layout-spa
Am I doing something wrong?

[robbertvc]

I'm having the same issue in my browser app. When the drawer is expanded, the router-links are behaving as expected, but when the drawer is in responsive (collapsible) mode, it is impossible to change the component in the nested view. It seems like the link fires, but then immediately changes back when the sidebar goes back to collapsed mode.

[murbanowicz]

I haven't looked into code, but it may be related to the way how you are
handling showing/hiding drawer.
I had similar issues with other stuff in the past.
Are you sure drawer stays in DOM all the time? It could be the reson if
drawer is removed from BOM and then links are getting crazy

2016-11-02 8:07 GMT+00:00 robbertvc [email protected]:

I'm having the same issue in my browser app. When the drawer is expanded,
the router-links are behaving as expected, but when the drawer is in
responsive (collapsible) mode, it is impossible to change the component in
the nested view. It seems like the link fires, but then immediately changes
back when the sidebar goes back to collapsed mode.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/quasarframework/quasar/issues/153#issuecomment-257797662,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AI80knGOTv8PPcA9vakImrGDHLgKuY6-ks5q6ETCgaJpZM4KmvRW
.

[rstoenescu]

Will investigate if this is indeed an issue.

[rstoenescu]

This would happen for history mode only, right?

[robbertvc]

Yes, only in history mode.

[laurentpayot]

Yes everything is fine with the hash mode.
I tried some rewrites with the connect-history-api-fallback plugin in script.dev.js, without success.

[laurentpayot]

@mariaczi the problem occurs with links to simple "views" (i.e. inside the router-view of the layout, like Hello in my example repo) where the layout thus the drawer never goes away. It also happens whith links to full-page components replacing the layout (Login in my example repo).

[laurentpayot]

@robbertvc and @mariaczi you're right, it only happens when the drawer is not visible (small screen). Interesting...

[rstoenescu]

Haven't investigated yet, but I bet that it's because drawer close event should be triggered before router-link (subcomponent of drawer-link) changes route. This happens in hash mode but router link Vue implementation breaks this when on history mode. It should have been implemented more consistently. Closing the drawer goes back one step in window history (we need this to be able to close drawer with back button). I'll see for a workaround. Thanks for your feedback all!

[rstoenescu]

Just curious, when on history mode (only), do you get any errors in the browser console, like the one below?

dom.js?bcd1:25 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

[laurentpayot]

@rstoenescu nope. Tried with Chrome and Firefox but didn't get your error.

[rstoenescu]

Ok, a fix is on the way. Testing it from all angles.

[rstoenescu]

Updated the "v2" default starter kit template with some work on history mode as first part of fixing this. https://github.com/quasarframework/app-template-v2/commit/6d3980fdef99618ea609a1cc57867fdc570a2899

[murbanowicz]

will you publish to npm ?

2016-11-03 17:05 GMT+00:00 Razvan Stoenescu [email protected]:

Updated the "v2" default starter kit template with some work on history
mode as first part of fixing this. quasarframework/app-template-v2@6d3980f
https://github.com/quasarframework/app-template-v2/commit/6d3980fdef99618ea609a1cc57867fdc570a2899

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/quasarframework/quasar/issues/153#issuecomment-258207299,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AI80khcxR228XLPPxhcLmjnCZpIduwkmks5q6hRQgaJpZM4KmvRW
.

[rstoenescu]

No need to publish to npm. Latest Quasar CLI (there's been an update to it a few days ago so update it globally) picks up the github repo, and I've just committed to the repo.

[laurentpayot]

I will test the new route prop of quasar-drawer-link as soon as Quasar _Framework_ v0.9 is released…

[laurentpayot]

q-drawer-link are working with v0.9.1 :+1: (didn't test #230 )

[dimiandre]

Hi, for me is still not working

"quasar-framework": "^0.13.10"

history mode is disabled (at least i think, i don't have mode: "history" in the router class)

When i click a link of the drawer it works, but as soon i close the sidebar it come back to the original page. This happen only on small screen devices

any ideas?

EDIT:
it seems to be not working only if i add "v-if" to the drawerk-link

Working:

 <q-drawer-link :class="privateClass" icon="assistant" :to="{path: '/link', exact: true}">
      MyLink
    </q-drawer-link>

Not working:
<q-drawer-link :class="privateClass" icon="assistant" :to="{path: '/link', exact: true}" v-if="myCondition"> MyLink </q-drawer-link>