Vue编程式跳转的实例代码详解
编程学习 2021-07-04 15:51www.dzhlxh.cn编程入门
这篇文章主要介绍了Vue编程式跳转的实例代码，文中给大家介绍了vue 编程式js跳转路由，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
编程式跳转的实现代码，如下所示：
<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，获取遍历
name: 'detail',
component: () => import('./views/detail/index.vue')
},
ps：狼蚁网站SEO优化看下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编程式跳转的实例代码 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
如果你觉得本文对你有帮助，欢迎网络推广网站推广转载，烦请注明出处，谢谢！