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

最新推荐文章于 2024-05-27 08:53:12 发布

原创最新推荐文章于 2024-05-27 08:53:12 发布 · 783 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在前端开发中正确使用Vue.js的路由进行参数传递，对比params与query两种方式的区别，并演示了如何通过点击事件打开新窗口并使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)
        }