how to use vue-router params

后端 未结 4 1751
被撕碎了的回忆
被撕碎了的回忆 2021-02-12 08:06

I\'m new to vue now working with its router. I want to navigate to another page and I use the following code:

this.$router.push({path: \'/newLocation\', params:          


        
相关标签:
4条回答
  • 2021-02-12 08:44

    Isn't it generally considered an anti pattern to bind the properties to the router?

    It's a much more DRY solution to have them bind to the component it's self, which I actually believe the Vue router does. Please see: https://router.vuejs.org/en/essentials/passing-props.html for more info on the best practices here

    Can you try accepting the property in the props: [] property of your component? You can see how to do that here: https://vuejs.org/v2/guide/components.html#Props

    Please do pop up if you have any questions! Happy to help further.

    0 讨论(0)
  • 2021-02-12 08:59

    Try using query instead of params

    this.$router.push({path: '/newpath', query : { foo: "bar"}});
    

    And in your component

    console.log(this.$route.query.foo)
    
    0 讨论(0)
  • 2021-02-12 09:04

    Since you want to pass params to the component of the respective route you route object's path property should have a dynamic segment denoted by : followed by the name of the key in your params object

    so your routes should be

    routes: [
        {path: '/newLocation/:foo', name: 'newLocation', component: newComponent}
    ]
    

    Then for programmatically navigating to the component you should do:

    this.$router.push({name: 'newLocation', params: { foo: "bar"}});
    

    See that I am using name of the route instead of path as you are passing params by the property params.

    if you want to use path then it should be:

    this.$router.push({path: '/newLocation/bar'});
    

    by the path approach the params will automatically map to corresponding fields on $route.params.

    Now if you console.log(this.$route.params) in your new component you will get the object : {"foo": "bar"}

    0 讨论(0)
  • 2021-02-12 09:06

    The easiest way I've found is to use named routes along with the params options. Let's say you have a router file that looks like this:

    And you want to reach the "movie" page with some ID. You can use Vue's router link component (or Nuxt's link component) to reach it like this:

    Vue:

    <router-link :to="{ name: 'movie', params: { id: item.id } }">{{ item.title }}</router-link>
    

    Nuxt:

    <nuxt-link :to="{ name: 'movie-id', params: { id: item.id } }">{{ item.title }}</nuxt-link>
    

    Note that the name parameter must match the "name" attribute of the desired route in the router file. And likewise, the parameter name must match.

    Nuxt creates the route file for you automatically when you create a new page. To see what name Nuxt gives its routes, go to the .Nuxt folder in your project and look for a "router.js" file

    0 讨论(0)
提交回复
热议问题