Detailed introduction to the method of setting Vue routing parameters

Vue is a progressive JavaScript framework with data-driven and componentized views as its core. Vue Router is the official routing manager for Vue.js. It allows us to locate application state via routes and render the appropriate components when requested by the user.

In Vue routing, we can define dynamic routes, which contain placeholders with parameters. For example, we can create a dynamic route for user details, which contains a parameter to match the user ID. This parameter can be obtained within the component through the $route object.

So, how to set parameters in Vue routing? This article will introduce in detail how to set Vue routing parameters so that you can better use Vue Router.

1. Basic parameter settings

In Vue routing, we can set routing parameters in the following ways:

{
  path: '/user/:id',
  component: User
}

In the above example, we define A path "/user/:id" is specified, where ":id" represents the parameter name. For example, when accessing "/user/123", the value of parameter "id" will be "123".

Accessing this parameter within the component is very simple, just use the params attribute of the $route object:

export default {
  name: 'User',
  props: {
    id: String
  },
  created () {
    this.id = this.$route.params.id
  }
}

In the component, we can use the props attribute to bind the "id" parameter to the component. Within the component, we can access the value of the "id" parameter via this.$route.params.id.

2. Optional parameter settings

In addition to basic parameters, we can also define optional parameters in Vue routing. In this case, the parameter name is followed by a question mark "?"

{
  path: '/user/:id?',
  component: User
}

In the above example, ":id?" indicates that the parameter "id" is optional. We don't get an incorrect route match when accessing the path "/user".

Within the component, we can use the query attribute of the $route object to access the value of the optional parameter. For example:

export default {
  name: 'User',
  props: {
    id: String
  },
  created () {
    this.id = this.$route.params.id || this.$route.query.id
  }
}

In the above example, we used ES6 syntax to provide a default value. If the parameter "id" is not provided in the URL, we use the query attribute to get it.

3. Named parameter settings

In addition to basic parameters and optional parameters, we can also use named parameters to safely transfer parameters between routes. Using named parameters, we can more explicitly represent the parameters passed to the route.

We can use the "name" attribute in the route definition to specify a route name. For example:

{
  path: '/user/:id',
  component: User,
  name: 'user'
}

In the above example, we specified the route name as "user" using the "name" attribute.

Within the component, we can access this name parameter through the dedicated "$router" and "$route" objects. For example:

export default {
  name: 'User',
  props: {
    id: String
  },
  created () {
    this.id = this.$route.params.id
  },
  methods: {
    goBack () {
      this.$router.push({ name: 'user', params: { id: this.id } })
    }
  }
}

In the above example, we use the name parameter to define the route and use the route name in the "goBack" method to return the route.

In Vue routing, parameter setting is very important. Basic parameters, optional parameters, and named parameters are set in different ways, so we need to understand these different methods. Now that you know how to set these parameters, I hope this article can help you use Vue Router better.

The above is the detailed content of Detailed introduction to the method of setting Vue routing parameters. For more information, please follow other related articles on the PHP Chinese website!