vue.jsvue-routerrouterlink

vue-router what is the difference to from :to

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 ?

Solution

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