使用Vue3路由query对象方式传参注意点
在学习Vue3路由传参的过程中,使用query对象方式传参一直报错。
Error parsing JavaScript expression: Unexpected token
错误的代码:
<ul>
<li v-for="news in newsList" :key="news.id">
<RouterLink :to="{
path: "/news/detail",//这行的双引号
query: {
id: news.id,
title: news.title,
news: news.news
}
}">{{ news.title }}</RouterLink>
</li>
</ul>
后面发现原来是双引号的问题。to后面会被解析成{path:导致报错。双引号里面还需要用引号需要使用单引号。
正确的代码:
<ul>
<li v-for="news in newsList" :key="news.id">
<RouterLink :to="{
path: '/news/detail',//这行改成单引号就可以了
query: {
id: news.id,
title: news.title,
news: news.news
}
}">{{ news.title }}</RouterLink>
</li>
</ul>