Introduction: Recently, I am working on the NUXT project, because when I do route jump, the parameter is always passed in the query way. A few days ago, I tried the params way because I did not want to affect the URL of the page address, but failed many times. Today, I checked the document and found that when I passed the parameter in the Params way: Name refers to the name configured after nuxT generates the route, not the path to the page, nor the name attribute defined internally by the component.

Basic route parameters are transmitted

1. Nuxt-link mode is used to transmit parameters

<ul>
  <li>
    <nuxt-link to="/">Home page</nuxt-link>
  </li>
  <li>
    <nuxt-link :to="{name: 'about'}">about</nuxt-link>
  </li>
  <li>
    <nuxt-link :to="{name: 'news', params: { newsId: 3306 }}">Params mass participation</nuxt-link>
  <li>
    <nuxt-link :to="{path: '/news', query: { newsId: 3306 }}">Query the participation</nuxt-link>
  </li>
</ul>
Copy the code

2. Pass parameters in js mode

// As a string
this.$router.push('/project? id=123')
// Params method, note: name refers to the generated name of nuxt
this.$router.push({ name: 'project'.params: { id: 123}})/ / query
this.$router.push({ path:'/project'.query: { id: 123}})Copy the code

instructions

  • When passing a parameter as a string: The argument isPage pathJoining together? And the parameters that follow.
  • When passing a parameter as params:Name refers to the name generated by NUXT after route configuration, not the page path.
  • Pages directory: /project/index /project/createInstead of the name property written inside the component.
  • When passing a parameter as query:Path refers to the path of the page.

Suppose the directory structure of Pages is as follows:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
Copy the code

So nuxt.js automatically generates the following route configuration:

router: {
  routes: [{name: 'index'.path: '/'.component: 'pages/index.vue'
    },
    {
      name: 'user'.// the name used when params passes the parameter
      path: '/user'.component: 'pages/user/index.vue'
    },
    {
      name: 'user-one'.// the name used when params passes the parameter
      path: '/user/one'.component: 'pages/user/one.vue'}}]Copy the code

3. The template receives parameters

$route.params.id
$route.query.id
Copy the code

4. Accept parameters in js

// Mounted To receive messages
mounted(){
  this.$route.params.id
  this.$route.query.id
}


// asyncData receives in asyncData
asyncData({params,query}){
  console.log('id',params.id)
  console.log('id',query.id)
}
Copy the code