Vue的列表超链接（A标签）是什么？如何实现跳转呢？

2022-09-02 23:33:24 阅读：202 来源： 互联网

标签：Vue console 标签超链接跳转 newsID query id

方法一：通过

<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,console,标签,超链接,跳转,newsID,query,id
来源： https://www.cnblogs.com/fu7n/p/16651645.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue的列表超链接（A标签）是什么？如何实现跳转呢？