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

<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" target="_blank" rel="external nofollow"   class="go-icon"></a>
                                <div v-html=""></div>

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

        </div>
           

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

https://blog.csdn.net/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");