1. 程式人生 > >Vue路由傳參時,重新整理頁面,引數將當成字串來處理?

Vue路由傳參時,重新整理頁面,引數將當成字串來處理?

在練習程式設計路由導航傳參時,發現將

這裡寫圖片描述
這裡寫圖片描述
num:10傳到積分頁面通過computed屬性加1變成11,但重新整理了本頁後並未按照預想的那樣,
這裡寫圖片描述
變為11,而是字串拼接成了101,
這裡寫圖片描述
然後,typeof檢視傳過去的Num型別
這裡寫圖片描述
console.log後發現,num的值變為了String型別。

原來,當重新整理本頁時,路由地址附帶引數進行了一次重新整理,頁面在讀取num時,當成字串處理了。
解決方法可以使用Number()方法強制轉換為數字型別進行計算。
這裡寫圖片描述

相關推薦

Vue路由重新整理頁面引數當成字串處理

在練習程式設計路由導航傳參時,發現將 num:10傳到積分頁面通過computed屬性加1變成11,但重新整理了本頁後並未按照預想的那樣, 變為11,而是字串拼接成了101, 然後,typeof檢視傳過去的Num型別 console.

vue路由並跳轉頁面

在vue專案中引數的傳遞可以使用本地快取或者Vuex,那麼vue能不能像小程式一樣路由傳參呢,顯然是可以的而且非常簡單 方式一:query傳參 //傳參 go(){ that.$router.push({ path:'/order',//跳轉路徑

Vue用router.push()跳轉頁面數改變跳轉頁面數據不刷新的解決辦法

ren osi pat 出現 響應 router 手機 dep code vue-router同路由$router.push不跳轉一個簡單解決方案 vue-router跳轉一般是這麽寫: goPage(ParentDeptCode2,DeptCode2,hosName,

vue 路由傳遞引數重新整理頁面引數丟失

在用vue做專案的時候,發現在新頁面重新整理後,上一頁面帶過來的引數會丟失,查閱資料才發現原來自己對params和query理解不透徹 下面是兩種傳參方法: 1、用 params 傳參,需要路由里加上這個引數 this.$router.push({name

vue路由query和params的區別

get bsp post tro 顯示 安全 建議 gpo ron 1、用法 A、query要用path來引入(用name來引入也可以),接收參數都是this.$route.query.name。 B、params要用name來引入,接收參數都是this.$route.p

AngularJs通過路由解決多個頁面資源浪費問題

blank class resource 對象 傳參 提高 控制器 開發效率 $scope 在實際開發中會遇到很多類似模塊界面大體都一致只是極少的細節部分不一樣,這時不管是在html頁面還有js及數據交互的時候我們就沒必要因為這些不同的頁面分出不同的文件,這樣很浪費內存及效

vue 路由 params 與 query兩種方式的區別

fine 分享 文件 路由 註意 undefine 方法 router 由於   初學vue的時候,不知道如何在方法中跳轉界面並傳參,百度過後,了解到兩種方式,params 與 query。然後,錯誤就這麽來了:    router文件下index.js裏面,是這麽定義路由

vue路由(常用)

當點選collection()這個方法的時候,跳轉並帶上標識, collection() { this.$router.push({path: 'notSee', query: { id: '1' }}); },

vue路由方式

現有如下場景,點選父元件的li元素跳轉到子元件中,並攜帶引數,便於子元件獲取資料。 父元件中: <li v-for="article in articles" @click="getDescribe(article.id)">   metho

vuevue路由的三種方式

前言 vue 路由傳參的使用場景一般都是應用在父路由跳轉到子路由時,攜帶引數跳轉。傳參方式可劃分為 params 傳參和 query 傳參,而 params 傳參又可分為在 url 中顯示引數和不顯示引數兩種方式,這就是vue路由傳參的三種方式。 方式一:params 傳參(顯示

Vue路由的三種方式

現有如下場景,點選父元件的li元素跳轉到子元件中,並攜帶引數,便於子元件獲取資料。 父元件中: <li v-for="article in articles" @click="getDescribe(article.id)"> 方案一 getDe

VUE路由主要的3種方式

VUE路由傳參有3種方式1)query方式(push時使用path來匹配)發起頁面:this.$router.push({path: "/accept", //接收頁面路由query: {id: 222}});路由配置:routes: [{path: "/accept"}]

vue.js通過路由跳轉重新整理頁面引數丟失

問題:vue.js路由跳轉,跳轉頁面重新整理後引數丟失,沒有資料,怎麼解決?? 出現的情況:從新聞列表頁面進入某一條新聞得詳情頁,需要在路由跳轉時給詳情頁面傳送該條新聞得ID,然後詳情頁獲取ID想後臺請求資料將內容展示,還有商品詳情頁等等~ 下面寫了一個小例子,是模擬專案的新聞列表和詳情頁,

vue路由跳轉params和query的區別

其實是很簡單的問題,不過還是踩坑了,在這裡說下 1.params傳參,用name屬性對應跳轉路徑,類似於post提交,引數不會出現在跳轉路徑裡。 <router-link :to="{ name:'cityList' ,params :{cityId:scope.row.id} }"&

vue路由物件重新整理會報錯資料丟失用json字串解決

我的訂單頁面---------》訂單詳情頁面 我的訂單頁面: encodeURIComponent(JSON.stringify(this.detailMsg))------變成json字串,且加密 toDetail(index) { request.p

【前端小小白的學習之路】vue學習記錄④(路由

emp 分享 exp pat vuejs 小白 one -1 limit 通過上篇文章對路由的工作原理有了基本的了解,現在我們一起來學習路由是如何傳遞參數的,也就是帶參數的跳轉。 帶參數的跳轉,一般是兩種方式: ①.a標簽直接跳轉。 ②點擊按鈕,觸發函數跳轉。 在上

vue部署到nginx服務下非根目錄重新整理頁面404怎麼解決?

nginx配置 location / { proxy_pass http://xxxx; } location /category { root /home/tv; index index.h

點選vue-scroller中的item進入其他頁面返回定位到點選前的item位置

1.新建.vue檔案封裝vue-scroller,並新增如下方法 getPosition(){ return this.$refs.scroller.getPosition() }, scrollTo(x, y, animate){ this.$refs

vue專案獲取位址列引數(非路由

在專案中,遇到一個需求,就是另一個系統直接跳轉到我們專案中的某個頁面,不需要做使用者的校驗直接單純的跳轉新頁面,再初始化查詢資料,引數以位址列的形式傳入 由於原來專案做過許可權控制,所以在路由那邊需要進行配置(部分程式碼): const newPage = { path:'/newPage', compon

路由(一級路由多級路由路由

路由 目錄  目錄:1.一級路由            2.多級路由            3.路由傳參  一.路由 <rou