vue-router какая разница от: до

Question

Когда использовать ссылку vue-router как

<router-link to="/login">Login</router-link>, она отображается в виде входа в систему и <router-link :to="/login">Login</router-link> это то же самое.

В чем разница и почему мы используемдвоеточие и мы должны его использовать?

Answer 1

: - это v-bind Сокращенный синтаксис. https://vuejs.org/v2/guide/syntax.html#v-bind-Shorthand

Если вы хотите использовать выражения Javascript, необходимо использовать :

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>

Без : Вы просто пишете строку внутри to=""

Answer 2

Двоеточие - это сокращение для директивы v-bind, и вы можете использовать его для привязки к вычисляемому свойству или методу.

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

Примеры:

<!-- 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/'+ this.id
        }
    }
});