這個是用vue-cli生成的項目下使用
比如有個路由跳轉時需要帶兩個參數:
<router-link to='/tr'>查看</router-link>
可以這樣寫:
<router-link to='/tr/uid/pid'>查看</router-link>
然后去router.js 中 處理這個路由:
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', 反斜杠后加冒號,意思是后面就是路由的參數。
然后去對應tr.vue組件中接受這個路由參數:
通過實例的this.$route.params,可訪問這個key-value對象,
我們給請求路由賦個值看看:
<router-link to='/tr/15/122'>查看</router-link>
打印如下Object {uid: "15", pid: "122"}
以上這篇vue2 router 動態傳參,多個參數的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。
新聞熱點
疑難解答