前言：
最近我跟同事在做一個(gè)BI系統(tǒng)，采用前后端分離。整個(gè)系統(tǒng)包括數(shù)據(jù)分析系統(tǒng)、運(yùn)營支持、系統(tǒng)設(shè)置等多個(gè)子系統(tǒng)。數(shù)據(jù)分析系統(tǒng)其實(shí)就是做各種數(shù)據(jù)報(bào)表、數(shù)據(jù)統(tǒng)計(jì)、實(shí)時(shí)數(shù)據(jù)的系統(tǒng)，這里面其實(shí)整個(gè)頁面就是一個(gè)模板，最上面是filter、第二級(jí)是統(tǒng)計(jì)圖、最下面是table數(shù)據(jù)。所以在數(shù)據(jù)分析子系統(tǒng)中，只要配置一個(gè)路由就可以匹配所有頁面，在系統(tǒng)中，我把這個(gè)為公用路由。至于公用路由權(quán)限如何鑒定其實(shí)很簡單：獲取到用戶權(quán)限列表后，渲染出所有的權(quán)限菜單，但注意每次跳轉(zhuǎn)時(shí)一定要進(jìn)行權(quán)限校驗(yàn)，具體原因自行思考。說著有點(diǎn)跑偏了，那么這個(gè)公用路由怎么可以匹配多個(gè)業(yè)務(wù)視圖呢？（一個(gè)路由對(duì)應(yīng)多個(gè)業(yè)務(wù)視圖）
很自然我們就會(huì)想通過路由傳遞參數(shù)，但進(jìn)入到公用數(shù)據(jù)分析路由中時(shí)，組件可以獲取路由信息，根據(jù)路由信息我們?nèi)カ@取filter\獲取圖表\獲取table數(shù)據(jù)\當(dāng)前視圖名稱，從而渲染出不同的數(shù)據(jù)分析報(bào)表、統(tǒng)計(jì)。
備注：為了減低復(fù)雜度，我這里通過傳遞一個(gè)參數(shù)（數(shù)據(jù)請(qǐng)求接口）獲取上面的所有數(shù)據(jù)，也就是通過一個(gè)接口把整個(gè)頁面的數(shù)據(jù)都獲取到，數(shù)據(jù)結(jié)構(gòu)大致如下：
{ viewname: '留存數(shù)據(jù)'， filters: [ { ... // 具體filter類型及數(shù)據(jù) } ], echarts:[ { .... // options } ]， tables:[ { ... // 表格數(shù)據(jù)，表頭\數(shù)據(jù)等 } ]}那么這個(gè)時(shí)候我們就很清楚我們的業(yè)務(wù)需求是什么了。接下來我們看下我們隊(duì)這個(gè)數(shù)據(jù)分析公用路由的配置，如下：
// 路由配置{ path: '', component: Layout, children: [{ path: '/data/config/:block/:page', component: () => import('@/views/data/common'), name: 'common', meta: { title: 'common', icon: 'common', noCache: true } }] } ''' path:中統(tǒng)一規(guī)范data/config/:block/:page 所有的參數(shù)進(jìn)入到common組件中，在組件中獲取到block\page參數(shù)， 然后作為一個(gè)api,這個(gè)api就是獲取當(dāng)前頁面數(shù)據(jù)的接口。 '''分析：
那么這是一種vue中通過路由傳遞參數(shù)的方式，那么我們vue中路由參數(shù)傳遞都有哪些方式呢？這就是我這篇文章詳細(xì)說明的主題。這個(gè)前言有點(diǎn)臭長了，sorry！我們馬上進(jìn)入正文。
我們可以先看下官方的文檔：路由組件傳參，這里面講述了路由組件傳參的所有方式，分別為：布爾模式、對(duì)象模式、函數(shù)模式。光看名字還是不能明白，我們接下來結(jié)合案例代碼一個(gè)一個(gè)解釋一下。
在講各種模式傳參之前，我們先了解一下路由是如何進(jìn)行跳轉(zhuǎn)和傳遞過來的參數(shù)是如何在組件中接收的，為什么要先說這些？因?yàn)檫@有利于理解設(shè)計(jì)者為啥要做這些模式的設(shè)計(jì)。我們用過的都知道，組件中：通過this.$router.push進(jìn)行編程式路由跳轉(zhuǎn)、router-link中的to屬性進(jìn)行路由切換。通過this.$route.params/this.$route.query獲取路由傳遞的參數(shù)。特別要留意this.$router和this.$route的區(qū)別，你可以把這兩個(gè)對(duì)象打印出來看，或者自行查閱官方說明。
總結(jié)：
1.this,$router.push進(jìn)行編程式路由跳轉(zhuǎn)
2.router-link進(jìn)行頁面按鈕式路由跳轉(zhuǎn)
3.this.$route.params獲取路由傳遞參數(shù)
4.this.$route.query獲取路由傳遞參數(shù)
5.params和query都是傳遞參數(shù)區(qū)別在于params不會(huì)再url上顯示出現(xiàn)，
并且params參數(shù)是路由的一部分，是一定要存在的，否則無法顯示視圖。
query則是我們通?？吹降膗rl后面跟上的？后跟的顯示參數(shù)
案例代碼：
<template> <div class="hello"> <label>Hello</label> <button type="button" @click="gotoD()"> 查看詳細(xì)信息1 </button> <router-link :to="{path:'/Detail/ckmike', params:{name:'Lily'},query:{sex:'女'},props:{age:18}}" > 查看詳細(xì)信息2 </router-link> </div></template><script>export default { name: 'HelloWorld', data () { return { } }, methods: { gotoD () { this.$router.push({path: '/Detail/ckmike', query: {sex: '男'}}) } }}</script>// 路由配置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({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/Detail/:name', name: 'Detail', component: Detail, props: { age: 21 } } ]})如果 props 被設(shè)置為 true，route.params 將會(huì)被設(shè)置為組件屬性。
const User = { props: ['id'], template: '<div>User {{ id }}</div>'}const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true }, // 對(duì)于包含命名視圖的路由，你必須分別為每個(gè)命名視圖添加 `props` 選項(xiàng)： { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ]})如果 props 是一個(gè)對(duì)象，它會(huì)被按原樣設(shè)置為組件屬性。當(dāng) props 是靜態(tài)的時(shí)候有用。
const router = new VueRouter({ routes: [ { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } ]})你可以創(chuàng)建一個(gè)函數(shù)返回 props。這樣你便可以將參數(shù)轉(zhuǎn)換成另一種類型，將靜態(tài)值與基于路由的值結(jié)合等等。
const router = new VueRouter({ routes: [ { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) } ]})上面是官方給出的說明文檔，更多詳細(xì)可進(jìn)入官方文檔。
接下來我們來測(cè)試一下params和query有啥區(qū)別：
<template> <div class="hello"> <label>Hello</label> <button type="button" @click="gotoD()"> 查看詳細(xì)信息1 </button> <router-link :to="{path:'/Detail', params:{name:'Lily', age: 18},query:{sex:'女'}, props: true}" > 查看詳細(xì)信息2 </router-link> </div></template><script>export default { name: 'HelloWorld', data () { return { } }, methods: { gotoD () { this.$router.push({path: '/Detail', query: {sex: '男'}, params: {name: 'ckmike', age: 21}, props: true}) } }}</script>// 路由配置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({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/Detail', name: 'Detail', component: Detail, props: true } ]})// 信息頁面<template> <div class="detail"> <label>詳細(xì)信息：</label> <br> <label>姓名:{{name}}</label> <br> <label>性別:{{sex}}</label> <br> <label>年齡:{{age}}</label> </div></template><script>export default { name: 'Detail', data () { return { } }, computed: { name () { return this.$route.params.name }, sex () { return this.$route.query.sex }, age () { return this.$route.params.age } }}</script>
說明：使用path進(jìn)行跳轉(zhuǎn)時(shí)，params是不會(huì)被作為route屬性傳遞給組件的。只有query屬性會(huì)被放入組件屬性中。
我們把path換成name來再看：
params參數(shù)類似于post方式，而query則類似于get方式，一旦路由的props設(shè)置為true時(shí)，那么組件中刻意通過props拿到參數(shù)，這個(gè)就是布爾模式。
如果給props傳遞一個(gè)對(duì)象，那么在組件中刻意獲取到路由中props的參數(shù)，一般用于靜態(tài)參數(shù)，這個(gè)不管你在router-link或者router.push改變對(duì)應(yīng)參數(shù)值，你獲取時(shí)都是路由配置中的值。
總結(jié)：
1.params傳遞參數(shù)，需要使用name進(jìn)行路由跳轉(zhuǎn)，否則無法傳遞。
2.params傳遞參數(shù)刷新會(huì)丟失數(shù)據(jù)，/router/:id方式上的id除外
3.query顯示拼接在url上，刷新不丟失，不是必須有，router/:id方式則必須有id參數(shù)，否則無法正確進(jìn)入視圖。
4.props也可以傳遞參數(shù)，但傳遞的只能是靜態(tài)參數(shù)。
聯(lián)系客服
