快捷導(dǎo)航

Vue Router參數(shù)傳遞的多種方式小結(jié)

更新時(shí)間：2025年04月25日 11:01:31 作者：vvilkin的學(xué)習(xí)備忘

在 Vue.js 開發(fā)中,vue-router 是構(gòu)建單頁面應(yīng)用（SPA）的核心工具之一,它不僅能幫助我們管理路由,還能在不同頁面之間傳遞參數(shù),本文將詳細(xì)介紹 vue-router 中常見的參數(shù)傳遞方式,并通過實(shí)際示例幫助你快速掌握這些技巧,需要的朋友可以參考下

1. 通過 params 傳遞參數(shù)

使用場景

params 是動(dòng)態(tài)路由的一部分，通常用于傳遞一些必需的參數(shù)，比如用戶 ID、產(chǎn)品 ID 等。

示例代碼

定義路由

// router/index.js
const routes = [
  {
    path: '/user/:id', // 動(dòng)態(tài)路由
    name: 'UserDetail',
    component: () => import('@/components/UserDetail.vue')
  }
];

傳遞參數(shù)

<!-- Home.vue -->
<template>
  <div>
    <button @click="goToUserDetail(123)">查看用戶 123 的詳情</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    goToUserDetail(userId) {
      this.$router.push({ name: 'UserDetail', params: { id: userId } });
    }
  }
};
</script>

獲取參數(shù)

<!-- UserDetail.vue -->
<template>
  <div>
    <h1>用戶詳情</h1>
    <p>用戶 ID: {{ id }}</p>
  </div>
</template>
 
<script>
export default {
  computed: {
    id() {
      return this.$route.params.id; // 獲取動(dòng)態(tài)路由參數(shù)
    }
  }
};
</script>

2. 通過 query 傳遞參數(shù)

使用場景

query 參數(shù)通常用于傳遞可選的參數(shù)，比如分頁、過濾條件等。

示例代碼

定義路由

// router/index.js
const routes = [
  {
    path: '/users',
    name: 'UserList',
    component: () => import('@/components/UserList.vue')
  }
];

傳遞參數(shù)

<!-- Home.vue -->
<template>
  <div>
    <button @click="goToUserList">查看活躍用戶</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    goToUserList() {
      this.$router.push({ path: '/users', query: { filter: 'active' } });
    }
  }
};
</script>

獲取參數(shù)

<!-- UserList.vue -->
<template>
  <div>
    <h1>用戶列表</h1>
    <p>當(dāng)前過濾條件: {{ filter }}</p>
  </div>
</template>
 
<script>
export default {
  computed: {
    filter() {
      return this.$route.query.filter; // 獲取查詢參數(shù)
    }
  }
};
</script>

3. 通過 props 傳遞參數(shù)

使用場景

將路由參數(shù)作為 props 傳遞給組件，可以使組件更加解耦，便于復(fù)用。

示例代碼

定義路由

// router/index.js
const routes = [
  {
    path: '/product/:id',
    name: 'ProductDetail',
    component: () => import('@/components/ProductDetail.vue'),
    props: true // 將路由參數(shù)作為 props 傳遞
  }
];

組件中使用 props

<!-- ProductDetail.vue -->
<template>
  <div>
    <h1>產(chǎn)品詳情</h1>
    <p>產(chǎn)品 ID: {{ id }}</p>
  </div>
</template>
 
<script>
export default {
  props: ['id'] // 接收路由參數(shù)
};
</script>

4. 通過 meta 傳遞參數(shù)

使用場景

meta 字段可以用于傳遞一些與路由相關(guān)的元信息，比如權(quán)限驗(yàn)證。

示例代碼

定義路由

// router/index.js
const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/components/Dashboard.vue'),
    meta: { requiresAuth: true } // 添加元信息
  }
];

導(dǎo)航守衛(wèi)中使用 meta

// router/index.js
router.beforeEach((to, from, next) => {
  const isAuthenticated = checkAuth(); // 假設(shè)這是一個(gè)檢查登錄狀態(tài)的方法
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login'); // 跳轉(zhuǎn)到登錄頁
  } else {
    next(); // 繼續(xù)導(dǎo)航
  }
});

5. 通過 hash 傳遞參數(shù)

使用場景

hash 通常用于頁面內(nèi)的錨點(diǎn)導(dǎo)航，但也可以用于傳遞一些簡單的參數(shù)。

示例代碼

傳遞參數(shù)

<!-- Home.vue -->
<template>
  <div>
    <button @click="goToSection">跳轉(zhuǎn)到簡介部分</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    goToSection() {
      this.$router.push({ path: '/about', hash: '#intro' });
    }
  }
};
</script>

獲取 hash

<!-- About.vue -->
<template>
  <div>
    <h1>關(guān)于我們</h1>
    <div id="intro">
      <h2>簡介</h2>
      <p>這里是簡介內(nèi)容。</p>
    </div>
  </div>
</template>
 
<script>
export default {
  mounted() {
    if (this.$route.hash === '#intro') {
      // 滾動(dòng)到簡介部分
      const element = document.getElementById('intro');
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }
};
</script>