有没有可能改变网址使用vue-router不去页面?

ryhaxcpt  于 2022-12-19  发布在  Vue.js
关注(0)|答案(3)|浏览(143)

nuxtjs上有一个商店,在/catalog页面上我需要做一个“加载更多”按钮,通过点击它,产品应该被加载,URL应该被更改为/catalog/page_2(?page=2不合适).如果我通过$router.push nuxt更改url就会转到这个页面,但是我需要更改url,但不能去任何地方。有没有可能以某种方式撤销重新加载,但保存URL中的更改?
history.pushState处理该任务,但是在这种情况下nuxt不知道url已经改变,并且当在浏览器中单击前进/后退时,nuxt不加载该页面所需的商品

olhwl3o2

olhwl3o21#

分页在逻辑上属于主页,所以在URL查询中考虑它们是很好的,比如?page=2。你也可以使用router.replace来更改查询。

this.$router.replace({
        query: { ...this.$route.query, page: this.page},
      })
svujldwt

svujldwt2#

用这个例子https://codesandbox.io/s/withered-darkness-9ezn9?file=/pages/index/_id.vue来做。现在我可以更改过滤器、类别和url,但是页面不会重新加载

mkshixfv

mkshixfv3#

如果您已经在正确的页面上,您不想更改页面,请先检查当前页面URL中的差异;

const your_query = '?page=2' // containing url params
    const currPath = this.$route.fullPath; // containing current path + query params, e.g.  '/catalog/?page=2'
    const nextPath = `${this.$route.path}?${your_query)}`;

    if (currPath !== nextPath) {
      //"Abuse" router to change the current's windows url
      this.$router.replace(nextPath, undefined, () => {
      //If route navigation fails, e.g. due to a same-route navigation or wrong permissions in navigation-guards, handle here
        return;
      });
    }

备选方案是直接将新的查询参数传递给路由器,如下所示:

this.$router.replace({ query:
         page: 2
      })

相关问题