Vue的列表超链接(A标签)是什么?如何实现跳转呢?
2022/9/2 23:52:50
本文主要是介绍Vue的列表超链接(A标签)是什么?如何实现跳转呢?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
方法一:通过
<router-link :to="">我要跳转,别拦我</router-link>
首页列表:
在这里我用a标签进行跳转,在vue里面使用<router-link></router-link> //注意:这里的router-link在前台解析的时候会自动变成a标签
<router-link :to="{path:'/news',query:{ id:item.NewsID }}" class="around"></router-link>
商品详情页:
//请求接口 created: function() { var newsID=this.$route.query.id; this.$http.get(this.$store.state.index.ip + '/api/News/'+newsID).then((response) => { console.log(response); }).catch(function(error) { console.log(error); }); }
方法二:通过绑定点击事件跳转页面(比较常用,纯手写,有什么问题欢迎留下你的评论)
1 <ul> 2 <li v-for="(item,index) in items" :key="index" @click="jumpPage(item.id)">我要跳转谁也别拦我</li> 3 </ul> 4 5 data(){ 6 return:{ 7 items:[ 8 { 9 id:1 10 }, 11 { 12 id:2 13 }, 14 { 15 id:3 16 } 17 ] 18 } 19 }, 20 methods: { 21 jumpPage(id) { 22 this.$router.push({ 23 path: '路由地址', 24 query: { 25 id: id 26 } 27 }) 28 }, 29 }
这篇关于Vue的列表超链接(A标签)是什么?如何实现跳转呢?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set