How to jump to the same page and switch parameters in vue

Vue.js is a JavaScript framework for building user interfaces. It adopts the MVVM model and binds DOM and data in a data-driven manner. In the application development process, front-end routing is a very important part. Vue.js provides the vue-router plug-in, which can be used to implement front-end routing functions.

In actual business, we often encounter scenarios where we need to jump to the same page and switch parameters. For example, when users browse the product details page, they need to switch to different products on the same page. At this time, we can use vue-router's "dynamic routing matching" and "lazy loading" functions to achieve this.

1. Dynamic route matching

The routing system of Vue.js allows us to define URLs with parameters and inject the parameters into the component when the route is matched. This is dynamic route matching.

First, define dynamic routing in router.js:

{
    path: '/goods/:id',
    name: 'Goods',
    component: () => import('@/views/Goods.vue')
}

In the above code, we define a route named "Goods" and the path is "/goods/: id". Among them, ":id" means that this is a dynamic parameter, and the user can pass any parameter value when accessing.

Next, get the routing parameters through $route in the Goods.vue component:

<template>
  <div>
    <h1>商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button @click="changeGoods">切换商品</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGoods() {
        let goodsId = parseInt(this.$route.params.id) + 1
        this.$router.push({ name: 'Goods', params: { id: goodsId } })
    }
  }
}
</script>

In the above code, we get the routing parameters through $route.params, and then switch When selecting goods, add 1 to the current parameter value, jump to the route named "Goods" through the $router.push method, and pass the parameters there. This enables the function of switching between different products on the same page.

2. Lazy loading

Lazy loading can be understood as delayed loading, which means loading the corresponding code only when needed. Using lazy loading can improve page loading speed and overall performance.

In Vue.js, you can use the import() function to implement lazy loading. Change the reference to the component in router.js to use lazy loading:

{
    path: '/goods/:id',
    name: 'Goods',
    component: () => import('@/views/Goods.vue')
}

The import('@/views/Goods.vue') here is to introduce the Goods.vue component through lazy loading. When the user accesses this route, the corresponding code will be loaded.

3. Complete code

Finally, let’s take a look at the complete code:

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/goods/:id',
      name: 'Goods',
      component: () => import('@/views/Goods.vue')
    }
  ]
})

Goods.vue

<template>
  <div>
    <h1>商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button @click="changeGoods">切换商品</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGoods() {
        let goodsId = parseInt(this.$route.params.id) + 1
        this.$router.push({ name: 'Goods', params: { id: goodsId } })
    }
  }
}
</script>

In the above code, we use dynamic route matching and lazy loading technology to realize the function of switching different products on the same page. This is an application scenario of the routing system in Vue.js. For students who have just started learning Vue.js, it is very worth learning and mastering.

The above is the detailed content of How to jump to the same page and switch parameters in vue. For more information, please follow other related articles on the PHP Chinese website!