Vue.js是一個建構使用者介面的JavaScript框架，採用MVVM模式，透過資料驅動的方式將DOM與資料綁定。在應用開發過程中，前端路由是非常重要的一環。 Vue.js提供了vue-router插件，可以用來實現前端路由功能。
在實際業務中，我們經常會遇到需要跳到同一個頁面並切換參數的場景，例如使用者瀏覽商品詳情頁面時，需要在同一個頁面內切換不同的商品。這時候，我們可以使用vue-router的「動態路由匹配」和「懶加載」功能來實現。
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>商品详情页面</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>在上面的程式碼中，我們透過$route.params取得到路由參數，然後在切換商品時，將目前的參數值加1，並且透過$router.push方法跳到名為「Goods」的路由，並且將參數傳遞過去。這樣就實現了在同一個頁面內切換不同商品的功能。
懶加載可以理解為延遲加載，也就是在需要的時候才去加載對應的程式碼。使用懶加載可以提高頁面的載入速度和整體效能。
在Vue.js中，可以使用import()函數來實作懶載入。在router.js中將元件的參考改為使用懶載入的方式：
{
path: '/goods/:id',
name: 'Goods',
component: () => import('@/views/Goods.vue')
}這裡的import('@/views/Goods.vue')就是透過懶載入的方式引入Goods.vue元件。當使用者造訪到這個路由時，才會去載入對應的程式碼。
最後，我們來看看完整的程式碼：
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>在上面的程式碼中，我們使用了動態路由匹配和懶加載的技術，實現了在同一個頁面內切換不同商品的功能。這是Vue.js中路由系統的一種應用場景，對於剛開始學習Vue.js的同學來說，非常值得學習與掌握。
以上是vue怎麼跳轉同一個頁面並切換參數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
