[Vuejs]-Vue-router what is the difference to from :to

by

2👍

✅

The : is v-bind Shorthand syntax.
https://v2.vuejs.org/v2/guide/syntax.html#v-bind-Shorthand

If you want to use Javascript expressions then need to use :


let LoginUrl = '/login'

<router-link :to="loginUrl">Login</router-link>


// Another example

let student = {id: 521, name: 'Jhon Doe'}

<router-link :to="`students/${student.id}`"></router-link>

Without : You’re just writing string inside to=""

👤Awolad Hossain

1👍

Colon is shorthand for v-bind directive and you would use it to bind to computed property or method.

https://v2.vuejs.org/v2/guide/syntax.html#v-bind-Shorthand

Examples:

<!-- Static value -->
<router-link to="/login">Login</router-link>

<!-- Dynamic values-->
<router-link :to="`/user/${id}`">Login</router-link>
<router-link :to="getUserLink(id)">Login</router-link>
<router-link :to="currentUserLink">Login</router-link>

new Vue({
    data() {
        return {
            id: 1
        }
    },
    computed: {
        currentUserLink() { return '/user/'+ this.id }
    },
    methods: {
        getUserLink(id) {
            return '/user/'+ id
        }
    }
});
👤Edin Omeragic

Leave a comment