跳到主要内容

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

管

管理员

前端

2019年08月09日 2,184 次阅读
本页目录

问题:

https://img4.mukewang.com/5c14924000010ff406810054.jpg

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

 
 

ue 中,模板内 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">
 

Related

相关文章

同分类文章 →
2025年06月10日 前端

gemini-2.5-pro-0605 按图生成html效果测试

Gemini 最新推出的 2.5 版本真的有点东西。之前用过不少 AI 辅助写代码的工具,但这次它的&ldquo;图生 HTML&rdquo;功能确实让我眼前一亮&mdash;&mdash;上传一张设计图,它不仅能快速识别布局和元素,还能生成结构清晰、样

2025年03月14日 前端

css flex-1和overflow-hidden结合使用详解:弹性布局与内容溢出控制

在 Flexbox 布局中,flex: 1 和 overflow: hidden 是两个常用的属性,它们组合使用可以有效地控制子元素的尺寸和内容显示。flex: 1 的作用:当子元素设置 flex: 1 时,它会根据 Flex 容器的主轴方向,自动伸缩以填充剩余的可用

2025年03月13日 前端

Vue 3中实现处理后的v-model双向绑定

在Vue 3中,当你需要对v-model传入的值进行处理后再展示或使用时,可以使用计算属性的getter和setter来实现这种处理过程的双向绑定。 实现步骤 接收父组件传递的v-model值 创建计算属性,在getter中处理展示值,在setter中处

WeChat

扫码加我微信

微信二维码