vue-router what is the difference to from :to

Question

When to use vue-router link as

<router-link to="/login">Login</router-link> it render to login view and <router-link :to="/login">Login</router-link> this one is the same.

What is the difference and why we use the colon and we must use it ?

Answer 1

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=""