vue如何跳轉同一個頁面并切換參數

這篇“vue如何跳轉同一個頁面并切換參數”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue如何跳轉同一個頁面并切換參數”文章吧。

Vue.js是一個構建用戶界面的JavaScript框架，采用MVVM模式，通過數據驅動的方式將DOM與數據綁定起來。在應用開發過程中，前端路由是非常重要的一環。Vue.js提供了vue-router插件，可以用來實現前端路由功能。

在實際業務中，我們經常會遇到需要跳轉同一個頁面并切換參數的場景，比如用戶瀏覽商品詳情頁面時，需要在同一個頁面內切換不同的商品。這時候，我們可以使用vue-router的“動態路由匹配”和“懶加載”功能來實現。

1. 動態路由匹配

Vue.js的路由系統允許我們定義帶參數的URL，并且在路由匹配時將參數注入組件中，這就是動態路由匹配。

首先，在router.js中定義動態路由：

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

在上面的代碼中，我們定義了一個名為“Goods”的路由，并且路徑為“/goods/:id”。其中，“:id”表示這是一個動態參數，用戶在訪問時可以傳遞任意的參數值。

接下來，在Goods.vue組件中通過$route獲取到路由參數：

<template>
  <div>
    <h2>商品詳情頁面</h2>
    <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>

在上面的代碼中，我們通過$route.params獲取到路由參數，然后在切換商品時，將當前的參數值加1，并且通過$router.push方法跳轉到名為“Goods”的路由，并且將參數傳遞過去。這樣就實現了在同一個頁面內切換不同商品的功能。

2. 懶加載

懶加載可以理解為延遲加載，也就是在需要的時候才去加載對應的代碼。使用懶加載可以提高頁面的加載速度和整體性能。

在Vue.js中，可以使用import()函數來實現懶加載。在router.js中將組件的引用改為使用懶加載的方式：

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

這里的import('@/views/Goods.vue')就是通過懶加載的方式引入Goods.vue組件。當用戶訪問到這個路由時，才會去加載對應的代碼。

3. 完整代碼

最后，我們來看一下完整的代碼：

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>
    <h2>商品詳情頁面</h2>
    <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>

以上就是關于“vue如何跳轉同一個頁面并切換參數”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。