Vue-router: Should router-link to a number work like router.go?

[chrisvfritz]

For example, to go back:

<router-link :to="-1">

[simplesmiler]

The most common use case is -1, so maybe <router-link back> will be better?

[chrisvfritz]

But why limit the API? In some cases, people may want to go back if there's history, or else go to a default location. For native-like mobile interfaces, I can also see use cases for forward.

[DaAwesomeP]

@chrisvfritz will you accept pulls for this?

[DaAwesomeP]

@chrisvfritz nevermind, this isn't as simple as I thought. I would need to resolve the location, route, and href of the next page, not just go to it.

[isometriq]

I've created a simple functional component, here:

<script>
    export default {
        render(createElement) {

            const $root = this.$root;

            return createElement(

                // Tag
                this.tag,

                // Attributes
                {
                    attrs: Object.assign({
                        href: this.tag=='a' ? 'javascript:' : null,
                        type: this.tag=='button' ? 'button' : null
                    }, this.$attrs),
                    on: {
                        click() {
                            $root.$router.back();
                        }
                    }
                },

                // Children
                this.$slots.default
            );
        },

        props: {
            'tag': {
                type: String,
                default: 'a'
            }
        }
    }
</script>

You can use it like this

// Most basic is a link with href="javascript:"
<router-back>Go Back!</router-back>

// You can specify the tag and normal html tags
<router-back tag="button" class="btn btn-sm btn-danger"><i class="fa fa-close"></i> Cancel</router-back>

I was thinking of wrapping the same logic with something like <router-history go="-5">Go back a lot</router-history, but I guess I'm too lazy and 99% of the time, it would be used to go back. These other special cases can go in a click event.

[pcornier]

I'm new to vuejs but is it strictly forbidden to access the router instance like this?

<div @click="$router.go(-2)">back</div>

[posva]

@pcornier that's absolutely ok, but please use the forum or the Discord server for questions 🙂

[pcornier]

@posva OK thank you, but the idea behind my comment was to close this feature request as we can access the router instance directly.

[rayfoss]

Vue-Material users:

<md-button class="md-fab md-mini md-primary" @click="$router.go(-1)">
  <md-icon>arrow_back</md-icon>
</md-button>

[leoyli]

I don't like the vm.$router approach, I was trying to limit the use of vm.$router in general, especially in the template, then I don't need to mock this object in my tests... IMO, we should have something imperative, and at least supports <router-link back> to make thing complete.

Otherwise, we just have to put @click="$router.push(to)" right? NO.

[posva]

Given that the utility of RouterLink is to display the correct URL as the href and other things related to the generated URL, we wouldn't be able to do any of these in the case of -1 (since we don't have access to the history entries), this would be equivalent to just doing @click="$router.go(-1)", so I don't think it's worth adding