vue2 router 動態傳參,多個參數的執行個體，vue2router

vue2 router 動態傳參,多個參數的執行個體，vue2router

這個是用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 動態傳參,多個參數的執行個體就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。