vue router傳遞引數的幾種方式

vue-router傳遞引數分為兩大類

程式設計式導航傳遞引數有兩種型別：字串、物件。

this.$router.push("home");

命名路由的前提就是在註冊路由的地方需要給路由命名如：

命名路由傳遞引數需要使用params來傳遞，這裡一定要注意使用params不是query。目標頁面接收傳遞引數時使用params

特別注意：命名路由這種方式傳遞的引數，如果在目標頁面重新整理是會出錯的

使用方法如下：

this.$router.push(})

接受傳遞的引數：

執行效果如下：

查詢引數其實就是在路由位址後面帶上引數和傳統的url引數一致的，傳遞引數使用query而且必須配合path來傳遞引數而不能用name，目標頁面接收傳遞的引數使用query。

注意：和name配對的是params，和path配對的是query

使用方法如下：

this.$router.push(});

接收引數如下：

執行效果如下：

click to news page

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傳遞引數的幾種方式

引數在鏈結上顯示 this.router.push this.route.query.id 引數不在鏈結上顯示 this.router.push 注 採用params在必須要要在路由上配置name，否則undefined routes route.params.id html 取參 this.rou...