一.頁面跳轉通過路由帶參數傳遞數據
// 1.頁面中的代碼
this.$router.push({
name: 'generalAdminOrderFlowAdd',
params: {
type: 'add',
templateType: this.orderTemplateType
}
})
// 2.路由中的代碼
{
path: ':type/:templateType',
name: 'generalAdminOrderFlowAdd',
component: require('@/components/generalAdmin/order/orderFlow')
}
// 3.獲取頁面中的參數值
let type = this.$route.params.type
二.使用vuex進行數據傳遞
// 1.index.js頁面代碼
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
Vue.use(Vuex)
const state = {
order: {} //聲明order對象
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
//2. getters.js頁面的代碼
export default {
// 聲明獲取order的方法
getOrder (state) {
return state.order
}
}
//3. mutation.js頁面的代碼
export default {
//設置order的值
SET_ORDER (state, order) {
state.order = order
}
// 4.在頁面中設置調用set方法設置全局order的值
this.$store.commit('SET_ORDER', order)// SET_ORDER為order值的設置方法的方法名
// 5.獲取全局的order值
// 從vuex中獲取order
let template = this.$store.state.order
方法一：
運用JS方法傳遞，this.$router.push({name:'測試頁面',params:{'屬性名':'屬性值'}});
這里的name 是要傳遞到某個頁面上的頁面名稱。
方法二：
運用vue的屬性方法傳遞，:to="{name:'測試頁面',params:{''屬性名:'屬性值'}}" （name同上）
注：使用 :to 傳值，需要在URL中配置相應的屬性名，如 '測試頁面'的 path 為
/test ，需要變為 /test/:屬性名 ，若傳遞多個屬性，則在后面添加即可 如 /test/:屬性名1 :屬性名2 :屬性名3
目標頁面上取值：
'測試頁面' 上的JS方法取值，this.$router.params.屬性名 ，即可獲取到相對於的屬性值。
具體使用哪一種傳值方法，根據需要，但取值的方法是統一的。
一、用name傳遞參數
用name傳值並顯示在模板里：
1在路由文件src/router/index.js里配置name屬性。
routes: [
{
path: '/Message',
name: 'Message',
component: resolve => require(['../components/page/Message.vue'], resolve)
}
]
2.傳值頁面 寫法 ：
注意： listInfo 是值的名字， 在接收值的頁面 需要用到
3.接收值的頁面：
二、通過<router-link> 標簽中的to傳參
上邊的傳參或許很不正規，也不方便，其實工作中多數傳參是不用name進行傳參的，我們用<router-link>標簽中的to屬性進行傳參，需要注意的是這里的to要進行一個綁定，寫成:to。先來看一下這種傳參方法的基本語法：<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
這里的to前邊是帶冒號的，然后后邊跟的是一個對象形勢的字符串.
- name：就是我們在路由配置文件中起的name值。
- params：就是我們要傳的參數，它也是對象形勢，在對象里可以傳遞多個值。
了解基本的語法后，我們改造一下我們的src/App.vue里的<router-link>標簽,我們把hi1頁面的<router-link>進行修改。
<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi頁面1</router-link>
把src/reouter/index.js文件里給hi1配置的路由起個name,就叫hi1.
-
{path:'/hi1',name:'hi1',component:Hi1},
最后在模板里(src/components/Hi1.vue)用$route.params.username進行接收.
{{$route.params.username}}
-
vue-router 利用url傳遞參數
:冒號的形式傳遞參數
在路由配置文件里以:冒號的形式傳遞參數，這就是對參數的綁定。在配置文件里以冒號的形式設置參數。我們在/src/router/index.js文件里配置路由。
{
path:'/params/:newsId/:newsTitle',
component:Params
}
我們需要傳遞參數是新聞ID（newsId）和新聞標題（newsTitle）.所以我們在路由配置文件里制定了這兩個值。
在src/components目錄下建立我們params.vue組件，也可以說是頁面。我們在頁面里輸出了url傳遞的的新聞ID和新聞標題。
在App.vue文件里加入我們的<router-view>標簽。這時候我們可以直接利用url傳值了。
<router-link to="/params/198/jspang website is very good">params</router-link> | -
正則表達式在URL傳值中的應用
上邊的例子，我們傳遞了新聞編號，現在需求升級了，我們希望我們傳遞的新聞ID只能是數字的形式，這時候我們就需要在傳遞時有個基本的類型判斷，vue是支持正則的。加入正則需要在路由配置文件里（/src/router/index.js）以圓括號的形式加入。
path:'/params/:newsId(\\d+)/:newsTitle',
加入了正則，我們再傳遞數字之外的其他參數，params.vue組件就沒有辦法接收到。