vue-router 和 from 有什么区别：to

【问题标题】：vue-router what is the difference to from :tovue-router 和 from 有什么区别：to
【发布时间】：2019-10-27 10:07:16
【问题描述】：

什么时候使用vue-router链接作为

<router-link to="/login">Login</router-link>它渲染到登录视图和<router-link :to="/login">Login</router-link>这个是一样的。

我们使用冒号有什么区别以及为什么我们必须使用它？

【问题讨论】：

标签： vue.js vue-router routerlink

【解决方案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=""里面写字符串

【讨论】：

【解决方案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
        }
    }
});

【讨论】：