Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

query string parameters disappears when pasting url to the browser #2628

Closed
piotrek-horodenski opened this Issue Feb 27, 2019 · 2 comments

Comments

Projects
None yet
2 participants
@piotrek-horodenski
Copy link

piotrek-horodenski commented Feb 27, 2019

Version

2.6.0

Reproduction link

https://jsfiddle.net/6motza4y/1/

Steps to reproduce

  1. prepare components and routing with nested route
  2. run app
  3. paste absolute url into the browser with query parameters added to the path to the nested route
  4. query params disappears and are not accessible thru $route object

What is expected?

query params should endure

What is actually happening?

query params are lost


jsfiddle doesn't enable navigating to it by pasting query params to the url, so it should be reproduced locally

This does not occur when route path is not nested

@posva

This comment has been minimized.

Copy link
Member

posva commented Feb 27, 2019

Copied into an html file and works fine.
When a bug cannot be reproduced on jsfiddle you can provide the content of an HTML file instead

I tested with this html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script src="https://unpkg.com/vue@2.6.7/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router"></script>
    <!-- <script src="/vue-router.js"></script> -->

    <div id="app">
      <router-link to="/">/home</router-link>
      <router-link to="/foo">/foo</router-link>
      <router-link to="/foo/child">/foo/child</router-link>
      <router-link
        :to="{
        path: '/foo/child',
        query: {
          name: 'hello',
        },
      }"
        >/foo/child?name=hello</router-link
      >
      <a href="/foo/child?name=hello">regular link /foo/child?name=hello</a>
      <router-view></router-view>
    </div>

    <script>
      const Home = { template: '<div>Home</div>' }
      const Foo = {
        template: '<div>Foo<div><router-view></router-view></div></div>',
      }
      const FooChild = { template: '<div>Foo child {{ $route.query }}</div>' }

      const router = new VueRouter({
        mode: 'history',
        routes: [
          { path: '/', component: Home },
          {
            path: '/foo',
            component: Foo,
            children: [
              {
                path: 'child',
                component: FooChild,
              },
            ],
          },
        ],
      })

      new Vue({
        router,
        el: '#app',
        data: {
          msg: 'Hello World',
        },
      })
    </script>
  </body>
</html>

@posva posva closed this Feb 27, 2019

@piotrek-horodenski

This comment has been minimized.

Copy link
Author

piotrek-horodenski commented Feb 27, 2019

yeah, my bad, thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.