How to hold URL query params in Vue with Vue-Router

Question

I am doing a project in Vue with Vue-Router . in my project ,i have a param named 'adtag' , which must be in the url query params , is there any simple way to hold this param ,no mater how router goes.

for example , I have three pages:

localhost/index
localhost/list
localhost/detail?id=11

page change using vue-router <router-link :to="{name:'Detail',query:{id:item.id}}"></router-link>

if I opened first page localhost/index?adtag=123 with adtag,page will changes with param 'adtag'

localhost/index?adtag=123
localhost/list?adtag=123
localhost/detail?adtag=123&id=11

why you need that? It's really strange. Maybe you could just use Vuex instead to keep this key (or whatever it is) — Marek Urbanowicz
– Marek Urbanowicz, Commented Feb 14, 2017 at 12:57
you may be able to do it, with the help of this page : forum.vuejs.org/t/… and with router.beforeEach navigation guard, doc: router.vuejs.org/en/advanced/navigation-guards.html — nicolast
– nicolast, Commented Feb 14, 2017 at 18:12
but it looks like the perfect use case for a cookie (if you need the adtag on the backend) or local storage (if you only need adtag on the frontend) — nicolast
– nicolast, Commented Feb 14, 2017 at 18:13
@nicolast is right on. You can use router.beforeEach to check for the query string and append it if it isn't there with something like this: stackoverflow.com/questions/5999118/… — retrograde
– retrograde, Commented Feb 14, 2017 at 22:38

CenterOrbit · Accepted Answer · 2017-09-04 01:25:29Z

With a default Vue 2.x installation, the router file is located src/router/index.js

I was able to then check if I needed to modify the request and add in any missing query params (modifying the to var apparently has no effect), and then call a "redirect" of next( .. new rout.. ).

Downside: Doubles the route calls, because essentially it redirects

Upside: It works, and the query preserving logic is in one place.

One caveat: On page load, the router fires and the "from" is a very empty route (even excluding the query params that were in the URL). Therefor I setup that if statement to verify the need to place the query param in place.

import Vue from 'vue'
import Router from 'vue-router'
// ... All your other components

Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Dashboard',
      component: Dashboard
    },
    // ... All your other routes
  ]
})

router.beforeEach((to, from, next) => {
  if (from.query.token && !to.query.token) {
    if (to.path === from.path) {
      // console.log('Identical routes detected')
      return // This is a no-no via the documentation, but a bug in routing to identical routes strips query params, and this prevents that
    }
    next({path: to.path, query: {token: from.query.token}})
  }

  next()
})

export default router

Haldir · Accepted Answer · 2021-12-01 15:46:05Z

As this is still an issue, I would even recommend using next(false) instead of returning.

if (from.query.foo && !to.query.foo) {
  if (from.path === to.path) {
    next(false);
  } else {
    next({
      path: to.path,
      query: { ...to.query, foo: from.query.foo },
    });
  }
} else {
  next();
}

For reference, the same issue from the github repository: https://github.com/vuejs/vue-router/issues/1900#issuecomment-346531301.

Collectives™ on Stack Overflow

How to hold URL query params in Vue with Vue-Router

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related