這次帶給大家Vue.js的路由參數，使用Vue.js的路由參數的注意事項有哪些，下面就是實戰案例，一起來看一下。
作用:為頁面傳遞路由參數.
在路由映射表中配置需要傳遞的參數:
例如:apple頁面,我需要傳遞一個color的參數,可以在path中以:開頭設定參數.
path: '/apple/:color',
具體使用:
let router = new VRouter({ // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
mode: 'history', routes: [ // 做一个映射表
{ path: '/apple/:color', component: Apple
},
{ path: '/banana', component: Banana
}
]
})#當我在頁面跳轉時,直接在地址後面拼接參數,下面的red,即為傳遞的color參數
http://localhost:8080/apple/red
在script標籤中取得頁面傳遞的參數,透過this.$route.params全域的物件來取得
{{msg}}
上面的列印結果為:
{color: "red"}
在template標籤中使用介面傳遞過來的參數,可以使用$route.params.color
{{msg}}
{{$route.params.color}}
傳遞多個參數
路由中設定如下:
path: '/apple/:color/detail/:type',
傳遞參數的url:
http://localhost:8080/apple/red/detail/3
列印傳遞過來的所有參數:
{color: "red", type: "3"}相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是Vue.js的路由參數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
