vue2 router 動(dòng)態(tài)傳參,多個(gè)參數(shù)的實(shí)例
更新時(shí)間：2017年11月10日 09:56:56 作者：liuhongyi0104
下面小編就為大家?guī)?lái)一篇vue2 router 動(dòng)態(tài)傳參,多個(gè)參數(shù)的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
這個(gè)是用vue-cli生成的項(xiàng)目下使用
比如有個(gè)路由跳轉(zhuǎn)時(shí)需要帶兩個(gè)參數(shù)：
<router-link to='/tr'>查看</router-link>
可以這樣寫(xiě)：
<router-link to='/tr/uid/pid'>查看</router-link>
然后去router.js 中 處理這個(gè)路由：
import Vue from 'vue'
import Router from 'vue-router'
import tr from '@/components/tr.vue'
import tab from '@/components/tab.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path:'/tr/:uid/:pid',
name: 'tr',
component:tr
},
{
path:'/tab',
name: 'tab',
component:tab
}
]
})
需要在router.js 中使用vue-router,具體是在path:'/tr/:uid/:pid', 反斜杠后加冒號(hào)，意思是后面就是路由的參數(shù)。
然后去對(duì)應(yīng)tr.vue組件中接受這個(gè)路由參數(shù)：
通過(guò)實(shí)例的this.$route.params，可訪問(wèn)這個(gè)key-value對(duì)象，
我們給請(qǐng)求路由賦個(gè)值看看：
<router-link to='/tr/15/122'>查看</router-link>
打印如下Object {uid: "15", pid: "122"}
以上這篇vue2 router 動(dòng)態(tài)傳參,多個(gè)參數(shù)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中reactive的對(duì)象清空所引發(fā)的問(wèn)題解決方案(清空不了和清空之后再去賦值就賦值不了)
在使用reactive定義的變量時(shí),直接賦值會(huì)失去響應(yīng)式,為了清空?filters并確保響應(yīng)式,可以使用Object.assign({},?filters)或者遍歷對(duì)象逐個(gè)清除屬性,本文介紹vue3中reactive的對(duì)象清空所引發(fā)的問(wèn)題解決方案(清空不了和清空之后再去賦值就賦值不了),感興趣的朋友一起看看吧2025-02-02
Vue中一個(gè)組件調(diào)用其他組件的方法詳解(非父子組件)
vue中最常見(jiàn)子父組件產(chǎn)值,大家一定都很熟悉,最近項(xiàng)目中碰到非父組件中調(diào)用子組件方法的問(wèn)題,這篇文章主要給大家介紹了關(guān)于Vue中一個(gè)組件調(diào)用其他組件的方法(非父子組件),需要的朋友可以參考下2022-10-10
本文主要介紹了淺談vue中文件下載的幾種方式及方法封裝，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
定時(shí)器如果不及時(shí)合理地清除，會(huì)造成業(yè)務(wù)邏輯混亂甚至應(yīng)用卡死的情況，這個(gè)時(shí)就需要清除定時(shí)器，本文就介紹了Vue如何優(yōu)雅的清除定時(shí)器，感興趣的可以了解一下2021-07-07
這篇文章主要為大家介紹了vue2從數(shù)據(jù)到視圖渲染之模板渲染詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了vue如何封裝一個(gè)高質(zhì)量的表單通用組件方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue實(shí)力踩坑?當(dāng)前頁(yè)push當(dāng)前頁(yè)無(wú)效的解決
這篇文章主要介紹了vue實(shí)力踩坑?當(dāng)前頁(yè)push當(dāng)前頁(yè)無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue中使用iframe嵌入網(wǎng)頁(yè),頁(yè)面可自適應(yīng)問(wèn)題
這篇文章主要介紹了vue中使用iframe嵌入網(wǎng)頁(yè),頁(yè)面可自適應(yīng)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue 實(shí)現(xiàn)單選框設(shè)置默認(rèn)選中值
今天小編就為大家分享一篇vue 實(shí)現(xiàn)單選框設(shè)置默認(rèn)選中值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue3.0引入百度地圖并標(biāo)記點(diǎn)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue3.0引入百度地圖并標(biāo)記點(diǎn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08