Vue路由參數(shù)的傳遞與獲取方式詳細介紹

更新時間：2022年09月30日 17:03:26 作者：月光曬了很涼快

顧名思義，vue路由傳參是指嵌套路由時父路由向子路由傳遞參數(shù)，否則操作無效。傳參方式可以劃分為params傳參和query傳參，params傳參又可以分為url中顯示參數(shù)和不顯示參數(shù)兩種方式。具體區(qū)分和使用后續(xù)分析

前言

vue 頁面路由切換時傳參的方式有如下幾種：

動態(tài)路由參數(shù)

它隱藏字段信息，相對于來說較安全，同時地址欄中的地址也相對較短
它必須是先定義后使用，一般用于根據(jù)固定參數(shù)，返回對應(yīng)的數(shù)據(jù)所用

query字符串 ?id=1

通過search字符串的方式來在地址欄中傳遞數(shù)據(jù)，相對于來說地址欄會暴露字段信息安全性較低，一般用于搜索相關(guān)，它可以不定義就可以直接用

props 隱式傳遞

隱式傳遞，它一般用于敏感數(shù)據(jù)的傳遞，可以不用

cookie/storage來完成對于頁面?zhèn)鲄?/p>

1. 通過動態(tài)路由參數(shù)傳遞

描述：

當(dāng)我們確定了某一個頁面需要根據(jù)唯一標(biāo)識來獲取詳情的時候，我們一般使用動態(tài)路由傳遞參數(shù)。

要注意，通過這種方式傳遞數(shù)據(jù)，動態(tài)路由必須先定義后使用，并且獲取數(shù)據(jù)時需要唯一標(biāo)識。

使用：

news.js（這個文件是從 index.js 文件中抽取拆分出來的，最終要被引入到 insex.js 文件中）：

import News from '@/views/News'
import Detail from '@/views/Detail'
const routes = [
  {
    path: '/news',
    component: News,
  },
  {
    // 通過動態(tài)路由參數(shù)來完成頁面數(shù)據(jù)的傳遞
    path: '/news/:id',
    component: Detail,
  },
]
export default routes

index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import news from './routes/news'
// 以插件的方式添加
Vue.use(VueRouter)
// 實例化路由對象及配置路由表
const routes = [...news]
const router = new VueRouter({
  // 路由模式
  mode: 'history',
  // 路由規(guī)則表
  routes
})
export default router

new.json（虛擬新聞 mooc 數(shù)據(jù)）:

[
  { "id": 1000, "title": "新聞1" },
  { "id": 2000, "title": "新聞2" },
  { "id": 3000, "title": "新聞3" }
]

new.vue（新聞頁）：

<template>
  <div>
    <ul>
      <template v-if="news == null">
        <li>加載中...</li>
      </template>
      <template v-else>
        <li @click="godetail(item.id)" v-for="item in news" :key="item.id">{{ item.title }}</li>
      </template>
    </ul>
  </div>
</template>
<script>
import { get } from '@/utils/http'
export default {
  data() {
    return {
      news: null
    }
  },
  async created() {
    let ret = await get('/mock/news.json')
    this.news = ret
  },
  methods: {
    godetail(id) {
      this.$router.push(`/news/${id}`)
    }
  }
}
</script>
<style lang="scss" scoped></style>

detail.vue（新聞詳情頁）：

<template>
  <div>
  </div>
</template>
<script>
export default {
  mounted() {
    // 獲取動態(tài)路由參數(shù)數(shù)據(jù)
    console.log(this.$route.params)
  }
}
</script>
<style lang="scss" scoped></style>

2. 通過query字符串傳遞

new.vue（新聞頁）：

<template>
  <div>
    <ul>
      <template v-if="news == null">
        <li>加載中...</li>
      </template>
      <template v-else>
        <li @click="godetail(item.id)" v-for="item in news" :key="item.id">{{ item.title }}</li>
      </template>
    </ul>
  </div>
</template>
<script>
import { get } from '@/utils/http'
export default {
  data() {
    return {
      news: null
    }
  },
  async created() {
    let ret = await get('/mock/news.json')
    this.news = ret
  },
  methods: {
    godetail(id) {
      this.$router.push(`/news/${id}?kw=abc`)
    }
  }
}
</script>
<style lang="scss" scoped></style>

detail.vue（新聞詳情頁）：

<template>
  <div>
  </div>
</template>
<script>
export default {
  mounted() {
    // 獲取query字符串
    console.log(this.$route.query)
  }
}
</script>
<style lang="scss" scoped></style>

3. props 隱式傳遞

news.js：

import News from '@/views/News'
import Detail from '@/views/Detail'
const routes = [
  {
    path: '/news',
    component: News,
  },
  {
    // 通過動態(tài)路由參數(shù)來完成頁面數(shù)據(jù)的傳遞
    path: '/news/:id',
    component: Detail,
    // 寫法1：回調(diào)函數(shù)寫法，可以書寫業(yè)務(wù)邏輯
    // router它就是一個路由對象
    props: router => {
      let title = router.params.id == '1000' ? '爆炸新聞' : '一般新聞'
      return {
        state: 2000,
        title
      }
    },
    // 寫法2：這是一種沒什么用的寫法，沒有業(yè)務(wù)邏輯
    // props: { title: '1', state: 2 }
  }
]
export default routes

new.vue（新聞頁）：

<template>
  <div>
    <ul>
      <template v-if="news == null">
        <li>加載中...</li>
      </template>
      <template v-else>
        <li @click="godetail(item.id)" v-for="item in news" :key="item.id">{{ item.title }}</li>
      </template>
    </ul>
  </div>
</template>
<script>
import { get } from '@/utils/http'
export default {
  data() {
    return {
      news: null
    }
  },
  async created() {
    let ret = await get('/mock/news.json')
    this.news = ret
  },
  methods: {
    godetail(id) {
      this.$router.push(`/news/${id}?kw=abc`)
    }
  }
}
</script>
<style lang="scss" scoped></style>

detail.vue（新聞詳情頁）：

<template>
  <div>
    <h3>props: {{ state }} -- {{ title }}</h3>
  </div>
</template>
<script>
export default {
  props: ['state','title'],
}
</script>
<style lang="scss" scoped></style>

這種傳遞方式，可以敏感字段從地址欄中隱藏，不會暴露數(shù)據(jù)，而且回調(diào)函數(shù)的寫法可以書寫業(yè)務(wù)邏輯。

這種方式可以做數(shù)據(jù)埋點（也叫用戶指紋），即隱蔽地收集用戶數(shù)據(jù)。用戶每次跳轉(zhuǎn)頁面都會觸發(fā) props 隱式傳遞，從而做到用戶數(shù)據(jù)的收集。收集到數(shù)據(jù)后，通過python、大數(shù)據(jù)等技術(shù)，為用戶建模，生成人物畫像，由此可以進行大數(shù)據(jù)推薦。

除了上面兩種寫法以外，還有第三種寫法

news.js：

import News from '@/views/News'
import Detail from '@/views/Detail'
const routes = [
  {
    path: '/news',
    component: News,
  },
  {
    // 通過動態(tài)路由參數(shù)來完成頁面數(shù)據(jù)的傳遞
    path: '/news/:id',
    component: Detail,
    // 寫法3：布爾類型
    // 布爾類型，一但使用，params動態(tài)路由參數(shù)傳的數(shù)據(jù)，可以通過props來獲取
    // 設(shè)置為布爾類型，可以簡化，動態(tài)路由參數(shù)的數(shù)據(jù)獲取
    props: true,
  }
]
export default routes

detail.vue（新聞詳情頁）：

<template>
  <div>
    <!-- 直接通過 props 獲取動態(tài)路由參數(shù) -->
    <h3>props: {{ $route.params }} -- {{ id }}</h3>
  </div>
</template>
<script>
export default {
  props: ["id"],
};
</script>
<style lang="scss" scoped></style>