没有合适的资源?快使用搜索试试~ 我知道了~
编程式跳转的实现代码,如下所示: <template> <ul xss=removed> <!-- //产品 --> <!-- :to = "/detail/item.id" --> <!-- 声明式跳转 :to = "{ name: 'detail',params: { id: item.id } }" --> <!-- <router-link :to = "{ name: 'detail',params: { id: item.id } }" tag = "li" class = "proitem" v-for="(item,index) of iss"
资源推荐
资源详情
资源评论
Vue编程式跳转的实例代码详解编程式跳转的实例代码详解
编程式跳转的实现代码,如下所示:编程式跳转的实现代码,如下所示:
<template>
<ul class = "prolist">
<!-- //产品 -->
<!-- :to = "/detail/item.id" -->
<!-- 声明式跳转 :to = "{ name: 'detail',params: { id: item.id } }" -->
<!-- <router-link :to = "{ name: 'detail',params: { id: item.id } }" tag = "li" class = "proitem" v-for="(item,index) of iss" :key='index'>
<div class = "itemimg">
<img :src="item.images.small" :alt="item.alt">
</div>
<div class = "iteminfo">
<h3>{{ item.title }}</h3>
<div class = "directors">
<span v-for="(itm,idx) of item.directors" :key="idx">
{{ itm.name }}/
</span>
</div>
<Rating :rating='(item.rating.average / 2).toFixed(1)' />
</div>
</router-link> -->
<!-- 编程式跳转 -->
<!-- @click="godetail(item.id) -->
<li class = "proitem" v-for="(item,index) of iss" @click="goDetail(item.id)" :key='index'>
<div class = "itemimg">
<img :src="item.images.small" :alt="item.alt">
</div>
<div class = "iteminfo">
<h3>{{ item.title }}</h3>
<div class = "directors">
导演:<span v-for="(itm,idx) of item.directors" :key="idx">
{{ itm.name }}/
</span>
</div>
<div class = "casts">
演员:<span v-for="(itm,idx) of item.casts" :key="idx">
{{ itm.name }}/
</span>
</div>
<Rating :rating="(item.rating.average / 2).toFixed(1)"/>
</div>
</li>
</ul>
</template>
<script>
import Rating from '@/components/common/Rating'
export default {
methods: {
goDetail (id) {
// console.log(this.$router)
// this.$router.push('/detail/' + id) //id由函数获得
// this.$router.push({ name: 'detail', params: { id: id } }) // 另一种方法
this.$router.push({ path: '/detail/' + id }) // 另一种方法
}
},
props: ['iss'],
components: {
Rating
}
}
</script>
router.js:
{
// path: '/detail',
path: '/detail/:id', // 详情需要配一个id,获取遍历
资源评论
weixin_38678521
- 粉丝: 3
- 资源: 883
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功