多页面应用使用vue中v-for和<a>标签进行页面跳转

最新推荐文章于 2025-07-06 22:51:21 发布

zm98

最新推荐文章于 2025-07-06 22:51:21 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：错误解决心得总结

本文链接：https://blog.youkuaiyun.com/zm9898/article/details/95197209

心得总结同时被 2 个专栏收录

33 篇文章

订阅专栏

错误解决

18 篇文章

订阅专栏

博客提及a标签正确写法可参考指定链接，还提到获取URL中的参数，这些内容与前端开发相关，为开发者提供了技术参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <div class="list-item"  v-for="article in articleList" :key="article.id">
            <div class="item">
                <div class="layui-fluid">
                    <div class="layui-row">
                        <div class="layui-col-xs12 layui-col-sm4 layui-col-md5">
                            <div class="img"><img src="img/sy_img1.jpg" th:src="@{/img/sy_img1.jpg}" alt=""></div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm8 layui-col-md7">
                            <div class="item-cont">
                                <h3>{{ article.title}}
                                    <button class="layui-btn layui-btn-danger new-icon">new</button>
                                </h3>
                                <h5>{{ article.category }}</h5>
                                <p>
                                    {{ article.articleAbstract }} ........</p>
                                <a :href="'details.html?id='+article.id"  class="go-icon"></a>
                                <div v-html=""></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

其中 a 标签的正确写法参考

https://blog.youkuaiyun.com/mning199201/article/details/81355882

获得url中的参数

function getQueryVariable(variable)
{
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        if(pair[0] == variable){return pair[1];}
    }
    return(false);
}

   <!--获得文章id-->
    var id=getQueryVariable("id");