vue-router路由参数刷新消失的问题
发布于 7 年前 作者 BubblyFace 27794 次浏览 来自 问答

页面使用vue-router在跳转时发的参数有用来给下一个页面请求数据用的。在进入页面后再次刷新，参数就消失了。想询问一下可行的解决方案。 这是上个页面跳转写的。 image.png 这边是从上个页面接收这个参数请求数据

methods: {
            init() {
                console.log(this.$route.params.articleId);
                this.params = this.$route.params;
                this.articleId = this.params.articleId;
                this.getArticleDetail(this.articleId);
            },
            getArticleDetail(id) {
                this.$http({
                    method: "GET",
                    url: "/getData/getArticleDetail",
                    params: {
                        id: id
                    },
   		  ...
        },

进入页面后再次刷新的话请求的数据就没有了。所以后台报错 请教一下合适的解决方案…万分感谢🙏

8 回复

把 articleId 写进 url，用 query 试试

@Huqiuwei ajax，所有的数据都是通过ajax请求得来的

1

你在用 vue-router 跳转的时候可以把参数写进 query 里this.$router.push({name:'articleDetail, query:{articleId: articleId}});
这样你的 url 就会像 http://xxx.xxx.xxx/articleDetail?articleId=123，这样无论你怎么刷新 articleId 都不会丢失
然后在你的 init 方法里 可以用 this.articleId = this.$route.query.articleId; 来获取id

@noraincode 嗯嗯，我去看vue-router发现可以这样写了，感觉自己太水了。。。。

如果要用 params 传参的话，可能需要在你的路由路径里也加上这个参数，比如你用
this.$router.push({name:'articleDetail, params:{articleId: articleId}});跳转，那么在路由里就要这样写

routes: [
    {
      path: '/articleDetail/:articleId',
      name: 'articleDetail'
    }
  ]

path: '/articleDetail/:articleId',里的 :articleId 是必须要有的

具体的可以参考 Vue-router 命名路由

@noraincode 这个我倒是能理解的，而且这我觉得也是一个常规写法，楼主配置的方法可能跟你写的一样吧，不过他没贴出自己的路由配置所以也不知道。。。但我之前确实看到不同地方的说法，说把参数写到 query 里， url 层面携带参数，这样你刷新才能获取到，所以才对这个问题有了疑惑

@noraincode 所以我感觉楼主出错可能不一定是你说的，不过还是感谢你的回答

@noraincode 嗯，是的，我已经把路由按照命名路由的方式进行了修改。之前也是没有仔细的观看vue-router进行参考就埋头去写。导致问题重重。谢谢您费心的解答了。

回到顶部