vue學習記錄 （路由傳參）

2022-06-17 08:12:11 字數 2505 閱讀 1057

通過上篇文章對路由的工作原理有了基本的了解，現在我們一起來學習路由是如何傳遞引數的，也就是帶引數的跳轉。

帶引數的跳轉，一般是兩種方式：

①.a標籤直接跳轉。

②點選按鈕，觸發函式跳轉。

在上篇文章中我們已經有兩個頁面（helloworld.vue&hello.vue),現在我準備往hello.vue裡面新增3個鏈結，分別對應兩種情況的跳轉。

123


452324


3839


引數傳遞1


4041


引數傳遞2


4243


點選跳轉


4445


4647


4864


6566
第38-44行**的路由鏈結跳轉寫法是固定的，記住會用就好了。缺省會被渲染成乙個 `` 標籤 ,to指令跳轉到指定路徑 。

第二步：hello.vue傳遞了引數，那麼我們就用helloworld.vue接收引數。見更新後的helloworld.vue**：

123


45}6


接收的引數id:7}


89接收的引數userid:10}


1112


接收的引數name:13}


1415


1617


1831


32
上面的第6-14行就是接收引數的容器。

注意：hello.vue中的$router是用來傳遞引數的，而helloworld.vue中的$route是用來接收引數的。

第三步：路由變化了，當然還得在index.js裡面體現（見第16行），見更新後的index.js**：

1 import vue from 'vue'


2 import router from 'vue-router'


3 import hello from '@/components/hello'


4 import helloworld from '@/components/helloworld'//


我們新定義的元件56


vue.use(router)


78 export default


newrouter(,


15 20]


21 })
執行跳轉成功後如下圖：

通過圖示我們看到，引數都可以正常拿到了。

同時注意url的變化。首先url是有個#號，這個就代表是單頁面的路由（hash模式）；然後我們的引數實際都是放在url上傳輸的，要注意別超出url的長度範圍。

下面我們再來看下子路由。

子路由也就是在父頁面下，單獨劃出乙個div容器，裡面再塞進乙個路由。

我們把helloworld設定為父路由，再設定兩個兩個子路由。分別是info和content。

更新後的helloworld.vue**如下：

123


45}6


接收的引數id:7}


89接收的引數userid:10}


1112


接收的引數name:13}


1415


1617


1819


2021


2236


37
第15-18行建立了子路由的容器。然後在components下，建立新目錄subpage，並在subpage下新建兩個子元件info.vue和content.vue。

info.vue**如下：

info page--id:}
content.vue**如下：

content page


id:}
子路由建好了，那怎麼把他們串起來呢？這裡就要更新index.js了。index.js**如下：

import vue from 'vue'import router from 'vue-router'import hello from '@/components/hello'import helloworld from '@/components/helloworld' //


我們新定義的元件


//引入子頁面


import info from '@/components/subpage/info.vue'import content from '@/components/subpage/content.vue'vue.use(router)


export 


default


newrouter(,,]


}]})
首先要引入子頁面，然後在父路由下配置一下即可。

到了這裡就算是配置好了，執行看看吧~~~~

Vue路由傳參

getdescribe id 方案一，需要對應路由配置如下 很顯然，需要在path中新增 id來對應 rou ter.push 中pat h攜帶的 引數。在 子元件中 可以使用 來獲取傳 遞的引數 值。th is router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值。t...

vue路由傳參

傳參方式一 router link方式 1.path 是要跳轉的路由路徑,也可以是路由檔案裡面配置的 name 值,兩者都可以進行路由導航 2.params 是要傳送的引數,引數可以直接key value形式傳遞 3.query 是通過 url 來傳遞引數的同樣是key value形式傳遞 2,3兩...

Vue 路由傳參

需求 獲取傳遞引數 login 11314555 路由傳參 router link loginbyid 11314555 路由傳參 button 方式一 路由配置 需要在path中新增 id 來對應 router.push 中path攜帶的引數 呼叫方法 loginbyid id 引數獲取 this...