Vue2.x 如何给超链接的href属性，动态拼接参数?

Question

<template>
  <ul>
    <li v-for='item in newsList'>
      <!-- 前缀是固定的path名，需要加上id作为参数 -->
      <a href="#/newsDetail/{{item.id}}">
        <span>{{item.desc}}</span>
      </a>
    </li>
  </ul>
</template>

• 以上代码会报错如下，错误信息推荐我使用v-bind在模板绑定数据

- href="#/newsDetail/{{item.id}}": Interpolation inside attributes has been removed. 
Use v-bind or the colon shorthand instead. 
For example, instead of <div id="{{ val }}">, use <div :id="val">.

• 但我改成:href的方式，发现提示语法错误，不能实现拼接item.id

Answer 1

<router-link :to="{name:'Index', params: { userId: 123 }}">link</router-link>
循环参见v-for,router-link标签本身也可以用v-for。
API地址：编程式导航，router-link

Answer 2

<ul>
    <li v-for='item in newsList'>
      <!-- 前缀是固定的path名，需要加上id作为参数 -->
      <a :href="'#/newsDetail/' + item.id ">
        <span>{{item.desc}}</span>
      </a>
    </li>
  </ul>

这样拼就不会出现问题了可以试试

Answer 3

楼上这个

完全好用

Answer 4

二楼正解，