vue js page jump with parameters

Vue.js is a very popular JavaScript framework that helps you build scalable web applications. One of the most powerful features of Vue.js is its routing system, which allows you to easily implement SPA (Single Page Application). When developing web applications, data transfer between pages is crucial, which requires parameter transfer between pages.

This article will introduce how to implement page parameter passing in Vue.js.

1. Define parameters in routing

In Vue.js, you can use the Vue Router plug-in for routing management. When defining a route, you can use a colon (:) to indicate the parameters to be passed. For example, define a route named "product" and define a parameter named "id" as follows:

{
  path: '/product/:id',
  name: 'product',
  component: Product
}

In the above example, the path of the route is "/product/:id ", where ":id" represents the parameter. And, this path will render the Product component.

2. Get parameters in the component

Once a route with parameters is defined, the next step is to pass the parameters to the corresponding component. In the component, you can use the $route attribute to get the passed parameters. For example, in the above example, if you want to get the parameters in the Product component, you can use the following code:

export default {
  name: 'Product',
  methods: {
    getProduct() {
      const id = this.$route.params.id;
      // 根据id获取产品数据
    }
  }
}

In the above code, $route.params is used to access the parameters passed by the route parameters, where "id" is the parameter name defined in the route.

3. Use routing links to pass parameters

In Vue.js, you can use routing links to pass parameters. Routing link is a component created by Vue Router for rendering links, which provides flexible operation routing functions.

For example, in a component named "ProductList", you can use a route link to link to the "product" route and pass a parameter named "id". The code is as follows:

<template>
  <div>
    <h2>Product List</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        <router-link :to="'/product/' + product.id">{{ product.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  data() {
    return {
      products: [
        { id: 1, name: 'Product 1' },
        { id: 2, name: 'Product 2' },
        { id: 3, name: 'Product 3' }
      ]
    }
  }
}
</script>

In the above component, use the <router-link> tag to create a routing link that points to the "/product/:id" route and replace " The ID in product.id" is used for parameters.

4. Programmatically Navigate to Routes with Parameters

In addition to using route links to pass parameters, you can also programmatically navigate to routes with parameters. In Vue.js, you can use the $router.push() method. For example, in the click event of a button, you can write the following code:

export default {
  name: 'ProductList',
  methods: {
    goToProduct(id) {
      this.$router.push({ name: 'product', params: { id: id } })
    }
  }
}

In the above code, the "goToProduct()" method uses the $router.push() method to navigate to A route named "product" and setting the "id" parameter to the passed in parameter.

Conclusion

Routing parameter passing is a very common requirement when using Vue.js for web application development. In this article, we introduced how to use the routing system in Vue.js to pass parameters between pages. First, we define a parameter in the route, and then get this parameter in the component. Second, we link to routes with parameters via route chaining and programmatically. This will help you build more flexible web applications that pass the required data between pages.

The above is the detailed content of vue js page jump with parameters. For more information, please follow other related articles on the PHP Chinese website!