id vue2路由傳參 Vue路由傳遞引數詳細說明

前言：

最近我跟同事在做乙個bi系統，採用前後端分離。整個系統包括資料分析系統、運營支援、系統設定等多個子系統。資料分析系統其實就是做各種資料包表、資料統計、實時資料的系統，這裡面其實整個頁面就是乙個模板，最上面是filter、第二級是統計圖、最下面是table資料。所以在資料分析子系統中，只要配置乙個路由就可以匹配所有頁面，在系統中，我把這個為公用路由。至於公用路由許可權如何鑑定其實很簡單：獲取到使用者許可權列表後，渲染出所有的許可權選單，但注意每次跳轉時一定要進行許可權校驗，具體原因自行思考。說著有點跑偏了，那麼這個公用路由怎麼可以匹配多個業務檢視呢？(乙個路由對應多個業務檢視)

很自然我們就會想通過路由傳遞引數，但進入到公用資料分析路由中時，元件可以獲取路由資訊，根據路由資訊我們去獲取filter\獲取圖表\獲取table資料\當前檢視名稱，從而渲染出不同的資料分析報表、統計。

備註：為了減低複雜度，我這裡通過傳遞乙個引數(資料請求介面)獲取上面的所有資料，也就是通過乙個介面把整個頁面的資料都獲取到，資料結構大致如下：

viewname: '留存資料'，

filters: [

... // 具體filter型別及資料

echarts:[

.... // options

tables:[

... // **資料，表頭\資料等

那麼這個時候我們就很清楚我們的業務需求是什麼了。接下來我們看下我們隊這個資料分析公用路由的配置，如下：

// 路由配置

path: '',

component: layout,

children: [

path:中統一規範data/config/:block/:page

所有的引數進入到common元件中，在元件中獲取到block\page引數，

然後作為乙個api,這個api就是獲取當前頁面資料的介面。

分析：那麼這是一種vue中通過路由傳遞引數的方式，那麼我們vue中路由引數傳遞都有哪些方式呢？這就是我這篇文章詳細說明的主題。這個前言有點臭長了，sorry！我們馬上進入正文。

vue路由傳參

我們可以先看下官方的文件：路由元件傳參，這裡面講述了路由元件傳參的所有方式，分別為：布林模式、物件模式、函式模式。光看名字還是不能明白，我們接下來結合案例**乙個乙個解釋一下。

在講各種模式傳參之前，我們先了解一下路由是如何進行跳轉和傳遞過來的引數是如何在元件中接收的，為什麼要先說這些？因為這有利於理解設計者為啥要做這些模式的設計。我們用過的都知道，元件中：通過this.$router.push進行程式設計式路由跳轉、router-link中的to屬性進行路由切換。通過this.$route.params/this.$route.query獲取路由傳遞的引數。特別要留意this.$router和this.$route的區別，你可以把這兩個物件列印出來看，或者自行查閱官方說明。

總結：1.this,$router.push進行程式設計式路由跳轉

2.router-link進行頁面按鈕式路由跳轉

3.this.$route.params獲取路由傳遞引數

4.this.$route.query獲取路由傳遞引數

5.params和query都是傳遞引數區別在於params不會再url上顯示出現，

並且params引數是路由的一部分，是一定要存在的，否則無法顯示檢視。

query則是我們通常看到的url後面跟上的？後跟的顯示引數

案例**：

hello

檢視詳細資訊1

:to=",query:,props:}"

檢視詳細資訊2

export default })

// 路由配置

import vue from 'vue'

import router from 'vue-router'

import helloworld from '@/components/helloworld'

import detail from '@/components/detail'

vue.use(router)

export default new router(} '

const router = new vuerouter(,

// 對於包含命名檢視的路由，你必須分別為每個命名檢視新增 `props` 選項：

path: '/user/:id',

components: ,

props:

物件模式

如果 props 是乙個物件，它會被按原樣設定為元件屬性。當 props 是靜態的時候有用。

const router = new vuerouter( }

函式模式

你可以建立乙個函式返回 props。這樣你便可以將引數轉換成另一種型別，將靜態值與基於路由的值結合等等。

const router = new vuerouter() }

上面是官方給出的說明文件，更多詳細可進入官方文件。

接下來我們來測試一下params和query有啥區別：

hello

檢視詳細資訊1

:to=",query:, props: true}"

檢視詳細資訊2

export default , params: , props: true})

// 路由配置

import vue from 'vue'

import router from 'vue-router'

import helloworld from '@/components/helloworld'

import detail from '@/components/detail'

vue.use(router)

export default new router(}

性別:}

年齡:}

export default {

name: 'detail',

data () {

return {

computed: {

name () {

return this.$route.params.name

*** () {

return this.$route.query.***

age () {

return this.$route.params.age

說明：使用path進行跳轉時，params是不會被作為route屬性傳遞給元件的。只有query屬性會被放入元件屬性中。

我們把path換成name來再看：

說明:使用name進行跳轉時，params生效，被傳遞給元件，頁面顯示出資訊，但是這個params的資訊一旦屬性頁面就會丟失。query不會

params引數類似於post方式，而query則類似於get方式，一旦路由的props設定為true時，那麼元件中刻意通過props拿到引數，這個就是布林模式。

如果給props傳遞乙個物件，那麼在元件中刻意獲取到路由中props的引數，一般用於靜態引數，這個不管你在router-link或者router.push改變對應引數值，你獲取時都是路由配置中的值。

總結：1.params傳遞引數，需要使用name進行路由跳轉，否則無法傳遞。

2.params傳遞引數重新整理會丟失資料，/router/:id方式上的id除外

3.query顯示拼接在url上，重新整理不丟失，不是必須有，router/:id方式則必須有id引數，否則無法正確進入檢視。

4.props也可以傳遞引數，但傳遞的只能是靜態引數。

id vue2路由傳參 Vue路由傳遞引數詳細說明

7 路由元件傳參

Vue 路由2 給路由傳參

微信小程式入門2 路由和路由傳參

id vue2路由傳參 Vue路由傳遞引數詳細說明

7 路由元件傳參

Vue 路由2 給路由傳參

微信小程式入門2 路由和路由傳參

相關推薦