【vue笔记】vue跨页面query传值 值显示在url上可通过url直接访问

【问题描述】一开始用params传值，传的值无法显示在url上，没有办法通过url直接访问特定页面，后来发现这种情况应该用query

【预期效果】点击文章链接后，重开一个页面显示文章详情，url上携带参数

【代码】
css *需要传递的数据是article.keyword

<ul>
    <li v-for="article in articles" :key="article.keyword">
        <a href="#/inf/gov" @click="goArticle(article.keyword)"> {{article.name}} </a>
        <span>{{article.time}}</span>
    </li>
</ul>

函数 *路径/article已经配置好了到Article.vue

        goArticle(keyword) {
            const {href} = this.$router.resolve({
                path: "/article",
                query: {
                    "articleKey": keyword //传递keyword
                }
            })
            window.open(href, '_blank')
        },

Article.vue 接收参数

        getParams(){
            var ret = this.$route.query.articleKey;
            this.articleKey = ret;
            console.log(this.articleKey)
        }