Vue通過路由實現(xiàn)頁面間參數(shù)的傳遞

更新時間：2023年04月21日 15:44:48 作者：Tango糖果π

這篇文章主要介紹了Vue通過路由實現(xiàn)頁面間參數(shù)的傳遞,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

第一步：在router里面的index.js文件中設(shè)置category路由路徑，但不設(shè)置參數(shù)
第二步：在header.vue里，通過@click方法實現(xiàn)push函數(shù)調(diào)用
第三步：methods中編寫push調(diào)用函數(shù)
第四步：在category.vue中接收參數(shù)

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

1.路由傳遞

// params單個參數(shù)傳遞
// 設(shè)置參數(shù) catid
this.$router.push({
    name: '/article/category', 
    params: {catid: '10'} 
})
// 獲取參數(shù) catid
this.$route.params.catid
 
// 多個參數(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多個參數(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緩存的形式進行傳遞

// 設(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(會話存儲)：生命周期是在僅在當前會話下有效。及只要這個瀏覽器窗口沒有關(guān)閉，即使刷新頁面或者進入同源另一個頁面，數(shù)據(jù)依然存在。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會被銷毀。

localStorage(本地存儲)：生命周期是永久的，關(guān)閉頁面或瀏覽器之后localStorage中的數(shù)據(jù)也不會消失。localStorage除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)永遠不會消失。不可跨瀏覽器共用。

3.父子組件之間的傳值

父組件給子組件傳值（通過props屬性）
子組件給父組件傳值（通過emit事件）

4.使用vuex進行傳值

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)控值變化并修改值的方法，通過store.commit（）方法來觸發(fā)狀態(tài)變更以及store.state來獲取狀態(tài)對象。

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

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

通過路由傳遞參數(shù)有兩個缺點：

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

2.參數(shù)過長時，影響地址欄美觀。

但是路由傳遞參數(shù)這種方便比較直觀，用起來也方便，可以直接把鏈接地址放到a標簽的href中，也可以作為函數(shù)進行封裝，實現(xiàn)頁面跳轉(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
由于動態(tài)路由也是傳遞params的，所以在 this.$router.push() 方法中path不能和params一起使用，否則params將無效，接收參數(shù)頁面會是undefined，需要用name來指定頁面，也就是說，用query對應(yīng)path（填寫路徑 /home），用params對應(yīng)name（寫路由js中對應(yīng)的name，而不是路徑）
接收數(shù)據(jù)必須在頁面加載完成后，也就是在mounted接收，而不是created。