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>
    <h1 id="商品详情页面">商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button>切换商品</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGoods() {
        let goodsId = parseInt(this.$route.params.id) + 1
        this.$router.push({ name: &#39;Goods&#39;, 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>
    <h1 id="商品详情页面">商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button>切换商品</button>
  </div>
</template>

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

在上面的程式碼中，我們使用了動態路由匹配和懶加載的技術，實現了在同一個頁面內切換不同商品的功能。這是Vue.js中路由系統的一種應用場景，對於剛開始學習Vue.js的同學來說，非常值得學習與掌握。

以上是vue怎麼跳轉同一個頁面並切換參數的詳細內容。更多資訊請關注PHP中文網其他相關文章！