vue.js a标签 传值

<!-- 在模板中 -->
<router-link :to="{ name: 'Detail', params: { id: item.id }}">详情</router-link>

// 在路由配置中
const routes = [
{ path: '/detail/:id', component: DetailComponent, name: 'Detail' }
];

<!-- 在模板中 -->
<router-link :to="{ name: 'Search', query: { keyword: searchKeyword }}">搜索</router-link>

// 在路由配置中
const routes = [
{ path: '/search', component: SearchComponent, name: 'Search' }
];

<!-- 在模板中 -->
<a href="#" @click="showDetail(item)">查看详情</a>

// 在方法中
methods: {
showDetail(item) {
this.$emit('detail-click', item);
}
}

<!-- 商品列表组件 -->
<template>
<ul>
<li v-for="item in items" :key="item.id">
<router-link :to="{ name: 'ProductDetail', params: { id: item.id }}">{{ item.name }}</router-link>
</li>
</ul>
</template>

<script>
export default {
data() {
return {
items: [
{ id: 1, name: '商品A' },
{ id: 2, name: '商品B' },
// 更多商品...
]
};
}
};
</script>

// 路由配置
const routes = [
{ path: '/product/:id', component: ProductDetailComponent, name: 'ProductDetail' }
];