在Vue項(xiàng)目開(kāi)發(fā)中，頁(yè)面之間傳遞參數(shù)有很多種方法

1.路由傳遞

// params單個(gè)參數(shù)傳遞
// 設(shè)置參數(shù) catid
this.$router.push({
    name: '/article/category', 
    params: {catid: '10'} 
})
// 獲取參數(shù) catid
this.$route.params.catid
 
// 多個(gè)參數(shù)傳遞
// 設(shè)置參數(shù) catid
this.$router.push({
    name: '/article/category', 
    params: { 
        catid: '10', 
        pcatid: '1', 
        user: {
            username: 'admin', 
            password: '1234556'
        } 
})
// 獲取參數(shù) catid
this.$route.params.catid
this.$route.params.pcatid
this.$route.params.user.username
this.$route.params.user.password
this.$router.push({
    path: '/article/category', 
    params: {catid: '10'} 
})
// 獲取參數(shù) catid
this.$route.params.catid
// query多個(gè)參數(shù)傳遞
// 設(shè)置參數(shù) catid
this.$router.push({
    path: '/article/category', 
    query: { 
        catid: '10', 
        pcatid: '1', 
        user: {
            username: 'admin', 
            password: '1234556'
        } 
})
// 獲取參數(shù) catid
this.$route.query.catid
this.$route.query.pcatid
this.$route.query.user.username
this.$route.query.user.password

2.sessionStorage/localStorage緩存的形式進(jìn)行傳遞

// 設(shè)置catid參數(shù)
window.localStorage.setItem('catid','10')
// 獲取catid參數(shù)
window.localStorage.getItem('catid')
 
// 設(shè)置catid參數(shù)
window.sessionStorage.setItem('catid','10')
// 獲取catid參數(shù)
window.sessionStorage.getItem('catid')

注：

sessionStorage(會(huì)話(huà)存儲(chǔ))：生命周期是在僅在當(dāng)前會(huì)話(huà)下有效。及只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉，即使刷新頁(yè)面或者進(jìn)入同源另一個(gè)頁(yè)面，數(shù)據(jù)依然存在。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會(huì)被銷(xiāo)毀。 

localStorage(本地存儲(chǔ))：生命周期是永久的，關(guān)閉頁(yè)面或?yàn)g覽器之后localStorage中的數(shù)據(jù)也不會(huì)消失。localStorage除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)永遠(yuǎn)不會(huì)消失。不可跨瀏覽器共用。

3.父子組件之間的傳值

• 父組件給子組件傳值（通過(guò)props屬性）
• 子組件給父組件傳值（通過(guò)emit事件）

 4.使用vuex進(jìn)行傳值

export default new Vuex.Store({
  state: {
	  appkey: '',
	  infokey: ''
  },
  mutations: {
	  setAppkey(state,appkey){
		  state.appkey = appkey;
	  },
	  setInfokey(state,infokey){
		  state.infokey = infokey;
	  }
  },
  actions: {},
  modules: {}
});

其中 state 中為需要傳遞的值，mutation中為監(jiān)控值變化并修改值的方法，通過(guò)store.commit（）方法來(lái)觸發(fā)狀態(tài)變更以及store.state來(lái)獲取狀態(tài)對(duì)象。

store.commit("setAppkey",response.data.HttpData.data.appkey);
store.commit("setInfokey",response.data.HttpData.data.infokey);
console.log(store.state.appkey,store.state.infokey);

這里我們介紹通過(guò)路由實(shí)現(xiàn)頁(yè)面間參數(shù)的傳遞

通過(guò)路由傳遞參數(shù)有兩個(gè)缺點(diǎn)：

1.參數(shù)直接暴露，安全性不高；

2.參數(shù)過(guò)長(zhǎng)時(shí)，影響地址欄美觀。

但是路由傳遞參數(shù)這種方便比較直觀，用起來(lái)也方便，可以直接把鏈接地址放到a標(biāo)簽的href中，也可以作為函數(shù)進(jìn)行封裝，實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和參數(shù)傳遞。

路由傳參的格式是： 

// 傳參
this.$router.push({
    name:'home',
    params: {
        message: "",
        data: {}
    }
})
// 或
this.$router.push({
    path:'/home',
    query: {
        message: "",
        data: {}
    }
})
// 接參
this.$route.params.message
this.$route.query.message

注意：

• 傳參是this.$router，接收參數(shù)是this.$route 
• 由于動(dòng)態(tài)路由也是傳遞params的，所以在 this.$router.push() 方法中path不能和params一起使用，否則params將無(wú)效，接收參數(shù)頁(yè)面會(huì)是undefined，需要用name來(lái)指定頁(yè)面，也就是說(shuō)，用query對(duì)應(yīng)path（填寫(xiě)路徑 /home），用params對(duì)應(yīng)name（寫(xiě)路由js中對(duì)應(yīng)的name，而不是路徑）
• 接收數(shù)據(jù)必須在頁(yè)面加載完成后，也就是在mounted接收，而不是created。

query和params的區(qū)別：

• query傳值在瀏覽器地址欄傳遞數(shù)據(jù)可見(jiàn)，而params不可見(jiàn)
• query配合著push的path，params配合著push的name進(jìn)行地址的跳轉(zhuǎn)

實(shí)例1：直接在元素中添加跳轉(zhuǎn)地址和參數(shù)

第一步：在router里面的index.js文件中設(shè)置category路由路徑和參數(shù)

第二步：在header.vue里，可以使用a的href直接添加跳轉(zhuǎn)地址和參數(shù)

 第三步：在category.vue中接收參數(shù)

實(shí)例2：通過(guò)路由函數(shù)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和params參數(shù)傳遞

第一步：在router里面的index.js文件中設(shè)置category路由路徑和參數(shù)

第二步： 在header.vue里，通過(guò)@click方法實(shí)現(xiàn)push函數(shù)調(diào)用

 第三步：methods中編寫(xiě)push調(diào)用函數(shù)

 第四步：在category.vue中接收參數(shù)

實(shí)例3：通過(guò)路由函數(shù)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和query參數(shù)傳遞

第一步：在router里面的index.js文件中設(shè)置category路由路徑，但不設(shè)置參數(shù)

 第二步： 在header.vue里，通過(guò)@click方法實(shí)現(xiàn)push函數(shù)調(diào)用

 第三步：methods中編寫(xiě)push調(diào)用函數(shù)

 第四步：在category.vue中接收參數(shù)

到此這篇關(guān)于Vue通過(guò)路由實(shí)現(xiàn)頁(yè)面間參數(shù)的傳遞的文章就介紹到這了,更多相關(guān)vue路由實(shí)現(xiàn)頁(yè)面參數(shù)傳遞內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論