詳解vue-router傳參的兩種方式
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。包含的功能有：
- 嵌套的路由/視圖表
- 模塊化的、基于組件的路由配置
- 路由參數(shù)、查詢、通配符
- 基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
- 細(xì)粒度的導(dǎo)航控制
- 帶有自動激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
- 自定義的滾動條行為
vue-router傳參兩種方式：params和query
params、query是什么？
params：/router1/:id ，/router1/123，/router1/789 ,這里的id叫做params
query：/router1?id=123 ,/router1?id=456 ,這里的id叫做query。
方法1：
query 方式傳參和接收參數(shù)
傳參：
this.$router.push({
path:'/openAccount',
query:{id:id}
});
接收參數(shù)：
this.$route.query.id
注意：傳參是this.$router,接收參數(shù)是this.$route
兩者區(qū)別：
$router為VueRouter實(shí)例，想要導(dǎo)航到不同URL，則使用$router.push方法
$route為當(dāng)前router跳轉(zhuǎn)對象，里面可以獲取name、path、query、params等
方法2：
params方式傳參和接收參數(shù)
傳參：
this.$router.push({
name:'/openAccount',
params:{
id: id
}
})
接收參數(shù): this.$route.params.id
注意:params傳參，push里面只能是 name:'xxxx',不能是path:'/xxx',因?yàn)閜arams只能用name來引入路由，如果這里寫成了path，接收參數(shù)頁面會是undefined?。?！
二者還有點(diǎn)區(qū)別，可以理解為：query相當(dāng)于get請求，頁面跳轉(zhuǎn)的時候，可以在地址欄看到請求參數(shù)，而params相當(dāng)于post請求，參數(shù)不會再地址欄中顯示
router.js
export default new Router({
routes: [
{
path: '/',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: Register
}
})
組件（傳參）：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<button @click="routerTo">click here to news page</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
routerTo(){
this.$router.push({ name: 'register', params: { userId: 123 }});//params方式 這里的name值是在定義route.js時中的name
//this.$router.push({ path: '/register', query: { userId: 123 }}); //query方式
}
}
}
</script>
<style>
</style>
組件（接收參數(shù)）
<template>
<div>
{{this.$route.params.userId}}或者{{this.$route.params.userId}}
</div>
</template>
<script>
</script>
總結(jié)
以上所述是小編給大家介紹的vue-router傳參的兩種方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue從后臺渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情詳解
這篇文章主要給大家介紹了關(guān)于vue從后臺渲染文章列表以及根據(jù)id跳轉(zhuǎn)文章詳情的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
讓多個組件使用同一個掛載點(diǎn)，并動態(tài)切換，這就是動態(tài)組件。這篇文章主要介紹了Vue動態(tài)組件 ,需要的朋友可以參考下2017-08-08
這篇文章主要給大家介紹了關(guān)于Vue中this.$emit()方法的相關(guān)資料,this.$emit()是 Vue.js 中一個很有用的方法,可以幫助子組件向父組件傳遞事件,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了基于Vue中的父子傳值問題解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-10-10
這篇文章主要介紹了SpringBoot在yml配置文件中配置druid的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Nginx部署前端Vue項(xiàng)目的步驟、常見問題與解決方案
在現(xiàn)代Web開發(fā)中,Vue.js成為前端開發(fā)者構(gòu)建單頁應(yīng)用的熱門框架,Nginx以其高性能和穩(wěn)定性,成為部署Vue項(xiàng)目的理想選擇,這篇文章主要介紹了Nginx部署前端Vue項(xiàng)目的步驟、常見問題與解決方案,需要的朋友可以參考下2024-09-09
webpack+vuex+axios 跨域請求數(shù)據(jù)的示例代碼
本篇文章主要介紹了webpack+vuex+axios 跨域請求數(shù)據(jù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue 實(shí)現(xiàn)走馬燈效果，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue router導(dǎo)航守衛(wèi)（router.beforeEach()）的使用詳解
導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這篇文章主要介紹了vue-router導(dǎo)航守衛(wèi)（router.beforeEach()）的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
vue3封裝數(shù)字滾動組件的實(shí)現(xiàn)示例
本文主要介紹了vue3封裝數(shù)字滾動組件的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08