本文**自:
vue-router傳遞引數分為兩大類
程式設計式導航傳遞引數有兩種型別:字串、物件。
字串的方式是直接將路由位址以字串的方式來跳轉,這種方式很簡單但是不能傳遞引數:
this.$router.push("home");
想要傳遞引數主要就是以物件的方式來寫,分為兩種方式:命名路由、查詢引數,下面分別說明兩種方式的用法和注意事項。
命名路由的前提就是在註冊路由的地方需要給路由命名如:
命名路由傳遞引數需要使用params來傳遞,這裡一定要注意使用params不是query。目標頁面接收傳遞引數時使用params
特別注意:命名路由這種方式傳遞的引數,如果在目標頁面重新整理是會出錯的
使用方法如下:
this.$router.push(})**如下:
click here to news page
接受傳遞的引數:
this is the news page.the transform param is }執行效果如下:
查詢引數其實就是在路由位址後面帶上引數和傳統的url引數一致的,傳遞引數使用query而且必須配合path來傳遞引數而不能用name,目標頁面接收傳遞的引數使用query。
注意:和name配對的是params,和path配對的是query
使用方法如下:
this.$router.push(});**如下:
click here to news page接收引數如下:
this is the news page.the transform param is }執行效果如下:
click to news page執行效果如下:
click to news page執行效果如下:
最後總結:路由傳遞引數和傳統傳遞引數是一樣的,命名路由類似表單提交而查詢就是url傳遞,在vue專案中基本上掌握了這兩種傳遞引數就能應付大部分應用了,最後總結為以下兩點:
1.命名路由搭配params,重新整理頁面引數會丟失
2.查詢引數搭配query,重新整理頁面資料不會丟失
3.接受引數使用this.$router後面就是搭配路由的名稱就能獲取到引數的值
vue router引數傳遞
準備工作 第一步 建立新的元件profile.vue profile 配置動態路由 傳遞引數主要有兩種型別 配置路由的格式 router id 傳遞的方式 在path後面跟上對應的值 傳遞後形成的路徑 router 123,router abc query的型別 配置路由的格式 router,也就是...
vue router的引數傳遞
1 新建元件 新建乙個user.vue檔案,新增 2 設定對映 開啟index.js檔案,新增如下 1 新建元件 profile.vue,新增如下 h2 p p div template export default script route.query是乙個物件,裡面是頁面傳過來的資料 2 設定對...
vue router傳遞引數的幾種方式
vue router傳遞引數分為兩大類 程式設計式導航傳遞引數有兩種型別 字串 物件。this.router.push home 想要傳遞引數主要就是以物件的方式來寫,分為兩種方式 命名路由 查詢引數,下面分別說明兩種方式的用法和注意事項。命名路由的前提就是在註冊路由的地方需要給路由命名如 命名路由...