Support for router-link on Quasar Floating Action Button

  • Currently if I want to redirect the user to a certain link by clicking on the quasar-small-fab I need create a method and use window.location from there. Right?!


    <quasar-fab icon="add" direction="up">
      <quasar-small-fab class="red" @click.native="goToFoo()" >mail</quasar-small-fab>
      <quasar-small-fab class="purple" @click.native="goToBar()" >alarm</quasar-small-fab>


    methods: {
      goToFoo () {
        window.location = '#/foo'
      goToBar () {
        window.location = '#/bar'

    It might be interesting create a new component like ‘quasar-fab-link’ with support to ‘router-link’ / similar to quasar-drawer-link


    <quasar-fab-link class="blue" to="/foo" > publish </quasar-fab-link>

    What do think?

  • Admin


    You’ll be able to use a new Vue directive in v0.9 called v-link (works just like v-link in Vue 1.

  • Admin

    And also, the correct way to do it is to change route through the router (example: this.$router.push(....)

  • Great! Tks!

Log in to reply