久久r热视频,国产午夜精品一区二区三区视频,亚洲精品自拍偷拍,欧美日韩精品二区

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

Vue頁(yè)面跳轉(zhuǎn)傳遞參數(shù)及接收方式

瀏覽:2日期:2022-11-25 15:51:56

最近接觸了vue項(xiàng)目,這里記錄一下vue跳轉(zhuǎn)到下一頁(yè)面攜帶參數(shù)的兩種方式。

典型應(yīng)用場(chǎng)景:列表頁(yè)跳轉(zhuǎn)到詳情頁(yè)

一、配置路由

文件路徑:src/router/config.php

import Vue from ’vue’import Router from ’vue-router’ import classify from ’.././components/classify/classify.vue’ import classifyChild from ’.././components/classify/classifyChild.vue’ export default new Router({ mode: ’history’, routes: [ { path: ’/classify’, name: ’ classify’, component: classify }, { path: ’/classify/classifyChild’, name: ’classifyChild’, component: classifyChild }, ]})

二、頁(yè)面跳轉(zhuǎn)及傳參

//方式一<router-link :to='{name:’classifyChild’,params:{id:item.id}}'> <button>跳轉(zhuǎn)</button></router-link> //方式二<router-link :to='{path:’/classify/classifyChild’,query:{id:item.id}}'> <button>跳轉(zhuǎn)</button></router-link>

三、參數(shù)接收

//對(duì)應(yīng)于方式一let id=this.$route.params.id; //對(duì)應(yīng)于方式二let id=this.$route.query.id;

補(bǔ)充知識(shí):關(guān)于vue3.0中的this.$router.replace({ path: ’/’})刷新無效果問題

首先在store中定義所需要的變量可以進(jìn)行初始化,再定義一個(gè)方法,登錄成功后A頁(yè)面,跳轉(zhuǎn)到B頁(yè)面之前,需要直接調(diào)用store中存儲(chǔ)數(shù)據(jù)的方法,全局可以使用,順序是,先調(diào)用store中的數(shù)據(jù),其次調(diào)用sessionStorage和localStorage中的數(shù)據(jù)。

這樣的話,可以避免A頁(yè)面跳轉(zhuǎn)B頁(yè)面時(shí)候,手動(dòng)刷新才顯示信息。

直接登錄成功后,直接調(diào)用store的方法,把值存儲(chǔ)進(jìn)去,B頁(yè)面可以直接顯示用戶信息。必須在store定義方法,登錄成功后調(diào)用方法進(jìn)行回顯用戶信息。在這里插入圖片描述

Vue頁(yè)面跳轉(zhuǎn)傳遞參數(shù)及接收方式

如此一來,就可以避免必須手動(dòng)刷新一下才會(huì)顯示信息。

以上這篇Vue頁(yè)面跳轉(zhuǎn)傳遞參數(shù)及接收方式就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 仲巴县| 上杭县| 稷山县| 阳春市| 郓城县| 安宁市| 南溪县| 清远市| 东台市| 庆安县| 武威市| 理塘县| 张家港市| 连云港市| 盈江县| 丰县| 天峨县| 铁力市| 南华县| 清水河县| 昌都县| 兰溪市| 福安市| 新密市| 渝北区| 江口县| 久治县| 乌海市| 东乡县| 林州市| 句容市| 卢湾区| 葫芦岛市| 溧水县| 彭水| 张家界市| 梅州市| 庆元县| 绥德县| 邓州市| 尼勒克县|