这篇文章主要为大家详细介绍了如何在Vue中实现一个编程式跳转功能，文中示例代码介绍的非常详细，具有一定的参考价值，发现的小伙伴们可以参考一下：
Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和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">
<h4>{{ item.title }}</h4>
<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">
<h4>{{ item.title }}</h4>
<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，获取遍历
name: 'detail',
component: () => import('./views/detail/index.vue')
},ps：下面看下vue 编程式js跳转路由
请看goNews()方法
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
我是首页组件
<button @click="goNews()">通过js跳转到新闻页面</button>
</div>
</template>
<script>
export default{
data(){
return {
msg:'我是一个home组件'
}
},
methods:{
goNews(){
// 注意：官方文档写错了
//第一种跳转方式
// this.$router.push({ path: 'news' })
// this.$router.push({ path: '/content/495' });
//另一种跳转方式
// { path: '/news', component: News,name:'news' },
// router.push({ name: 'news', params: { userId: 123 }})
this.$router.push({ name: 'news'})
}
}
}
</script>
<style lang="scss" scoped>
</style>以上就是亿速云小编为大家收集整理的如何在Vue中实现一个编程式跳转功能，如何觉得亿速云网站的内容还不错，欢迎将亿速云网站推荐给身边好友。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
