Vue-router 'history' mode not working about figma-low-code HOT 26 CLOSED

Thanks, I found the issue. Nested elements are transformed into divs, and the link is set in JavaScript. There I didn't check for the correct mode. I think it is fixed in 1.0.13. Can you update the lib

npm update [email protected]

Klaus

from figma-low-code.

Hi @KlausSchaefers
I also think this repo should be updated with the latest vue-low-code version in package,json so users don't encounter the bugs that have been resolved.

from figma-low-code.

Hi,

I think I fixed it. Can you try out [email protected]?

Cheers,

Klaus

from figma-low-code.

Hello,

I am using [email protected]

I figured the routing works when inputted directly.

But when I click a button to go to another component, it adds hash to the route, hence not working.

It only works when I edit the route URL by removing the hash.

@KlausSchaefers
Thanks

from figma-low-code.

Hi,

the new code base should detect if you are using the router in 'history' mode and remove the hashs form the links. The mode should be declared ass

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

1. Can you delete the package-log.json and the node_modules folder

2. Reinstall all dependencies

Thanks,

Klaus

from figma-low-code.

@KlausSchaefers I have deleted package-lock.json and also node_modules

Then reinstalled.

This is the package-lock reference which shows 1.0.1-beta is used.

"vue-low-code": {
      "version": "1.0.1-1.beta",
      "resolved": "https://registry.npmjs.org/vue-low-code/-/vue-low-code-1.0.1-1.beta.tgz",
      "integrity": "sha512-3Gol6q/GFkoBanaF50vGix78GbG8ay7rshmC4GBIn9G/mLUtVjL0NEkylnVxui/DWMr1lrdNBpEf0lJ4AXpqyw==",
      "requires": {
        "@mdi/font": "^4.9.95"
      }
    }

And in the router file:
const router = new VueRouter({ mode: 'history', routes })

But it still not working. It adds hash to the route. But when I edit the route url, it works well. But when I click to navigate to a component it adds hash to the url which makes it fail.

from figma-low-code.

can you open the dev console in the browser. You should see something like

QUX.mounted() > Launch router with history 

from figma-low-code.

@KlausSchaefers Nope. I don't see that in the console.
I'm using Figma not Quant-UX though.

from figma-low-code.

Figma wraps Quant-UX.. so you should have seen that.... Strange. can you check if the router object on your page has the mode set?

mounted () {
  console.debug(this.$router.mode)
  console.debug(this.$router)
}

from figma-low-code.

Ya.

console.log(this.$router.mode)

history

console.log(this.$router)

VueRouter Object

However, console.debug doesn't return anything.

from figma-low-code.

Hmmm, that is strange. can you share your project?

from figma-low-code.

Wow. Thanks for the effort @KlausSchaefers I really appreciate.

I have created temporal repo and figma document.

Figma link: https://www.figma.com/file/uKgt9PzMeazuh8SqXJQoVs/Figma-low-code-route-test?node-id=0%3A1

Repo link: https://github.com/kingzley/figma-low-code-test

from figma-low-code.

For me this works. The history mode is detected and the links are correct

from figma-low-code.

from figma-low-code.

Ya. Contact Us is strange,
Try clicking on Login or SignUp for example.

from figma-low-code.

Hello @KlausSchaefers
Were you able to see the routing issue when clicking on Login, SignUP and other buttons on your end?

from figma-low-code.

Yes. The generated URLs did not contain the # ... see the screen shot.

from figma-low-code.

From the screenshot only the ContactUs element is in an anchor tag.

But other elements such as Login and Signup isn't.

Is there any particular reason why this is the case? Because it includes the hash when those buttons are clicked. Please check again to confirm

from figma-low-code.

@KlausSchaefers Thanks a lot. 🙏

It works now.

from figma-low-code.

Hi,

I found some other bugs in your design, e.g. the line height and missing font imports. I added this in the latest release

npm update [email protected]

Could you verify that fixes?

from figma-low-code.

No matching version found for [email protected]

Version 1.0.14 not updated yet.

from figma-low-code.

Ups, did not push to NPM... try now :D

from figma-low-code.

It works.

I just noticed that it doesn't import the font colors.
Is that a bug or that feature is not available now?

from figma-low-code.

You mean the blue underscores? This is still a missing feature.... Rich text is not yet supported!

from figma-low-code.

Feel free to open a bug for that...

from figma-low-code.

You mean the blue underscores? This is still a missing feature.... Rich text is not yet supported!

Yes. Exactly.

Feel free to open a bug for that...

Oh Ok. Thank you.

from figma-low-code.