How to use route parameters in vue router?

The core of using routing parameters in Vue Router is to capture URL values ​​through dynamic snippets. 1. When defining routes with parameters, use colons in the path: represent dynamic parameters, such as /user/:id; 2. In the component, the parameters can be obtained through $route.params, and useRoute can be used in Vue 3; 3. Optional parameters are added?, and the wildcard character uses * to capture unmatched paths; 4. For jumps, you can use router-link or programmatic navigation and explicitly pass params.

Use routing parameters in Vue Router, the core is to capture the values ​​in the URL through dynamic snippets. For example, 123 in /user/123 can be passed to the component as a parameter.

1. Define routes with parameters

When defining a route, you can use colon : in the path to represent a dynamic parameter. For example:

 const routes = [
  {
    path: '/user/:id',
    component: UserDetail
  }
]

In this way, when accessing /user/123 or /user/abc , the UserDetail component will be matched, and 123 or abc will be passed in as parameters.

Note: You can define multiple parameters, such as /user/:id/post/:postId , but it is generally recommended to keep the path simple.

2. Get routing parameters in the component

Inside the component, you can get these parameters through $route.params . For example:

 <template>
  <div>User ID: {{ userId }}</div>
</template>

<script>
export default {
  data() {
    return {
      userId: this.$route.params.id
    }
  }
}
</script>

If you are using the Vue 3 Composition API, you can use useRoute :

 import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    return {
      userId: route.params.id
    }
  }
}
</script>

• The parameters are responsive, but modifying the URL will not trigger component re-rendering, it will only update the $route object.
• If you want to do certain operations based on parameter changes, remember to listen for changes in $route .

3. Optional parameters and wildcard characters

Vue Router also supports optional parameters and wildcards, two features that are very useful when handling flexible paths.

Optional parameters

Add a ? after the parameter to indicate that this parameter is optional:

 {
  path: '/search/:query?',
  component: SearchResults
}

In this way, both /search and /search/vue can match the same component.

Wildcard

If you want to capture all unmatched paths, you can use * :

 {
  path: '/:pathMatch(.*)*',
  component: NotFound
}

This way of writing will split the path into an array, for example, accessing /foo/bar/baz , $route.params.pathMatch will be ['foo', 'bar', 'baz'] .

4. Several ways to jump with parameters

You can use <router-link> or programmatic navigation to jump to the page with parameters.

Using router-link

 <router-link :to="`/user/${userId}`">View the user</router-link>

Or a little more structured:

 <router-link :to="{ path: &#39;/user/&#39; userId }">View user</router-link>

Programming Navigation

 this.$router.push(`/user/${userId}`)

Or use object form:

 this.$router.push({ name: 'user', params: { id: userId } })

Note: When using params , if a named route is used, the parameters in the path will not be automatically spliced, and params must be explicitly provided.

Basically that's it. The routing parameters themselves are not complicated, but in actual projects, it is easy to cause problems due to improper path design or inadequate parameter processing. Especially when nested routes and named routes are present, special attention should be paid to the parameter passing method.

The above is the detailed content of How to use route parameters in vue router?. For more information, please follow other related articles on the PHP Chinese website!