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

Question

什么时候使用 vue-router link as

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

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

Answer 1

冒号是 shorthand 用于 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
        }
    }
});

Answer 2

: 是 v-bind Shorthand 语法。 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=""

里面写字符串

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

vue-router what is the difference to from :to

vue.js

vue-router

routerlink