javascript - vue的router-link中使用es6字符串模板时为什么还要加双引号？

问题描述

问 题

我把双引号去掉就报错了。
不太明白，求大佬指点一下。

解决方案

Vue 中，模板内 HTML 标签 :xxx="" 时，双引号中的内容是一个 JS 表达式，而不是一般的 HTML 属性。

举例：

<div @click="count++">{{count}}</div>

这时候 count++ 是一段模板编译后由 Vue 执行的 JS 代码，而不是简单的属性字符串。同理，router-link 中书写的也是 JS 代码，而不是链接字符串。这样一来，需要直接返回字符串路径时，就必须采用单引号把字符串内容括起来，例如 :to="'/index'" 这样。如果写 :to="/index"，那么 Vue 会求值一个名为 /index 的变量，而这显然是非法的。

如果不想嵌套单双引号，可以去掉冒号，写 <router-link to="/index">

这篇关于javascript - vue的router-link中使用es6字符串模板时为什么还要加双引号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！