聲明式：<router-link :to="...">
編程式：router.push(...)
主要實(shí)現(xiàn)：通過(guò)A組件跳轉(zhuǎn)鏈接到B組件并且傳參數(shù)
1、router.push使用
router/index.js
export default new Router({
routes: [
{
path: '/',
name: 'A',
component: require('../components/A')
},
{
path: '/B/:name/:age',
name: 'B',
component: require('../components/B')
}
]
})
A組件舔腾，綁定一個(gè)@click事件岛杀，跳轉(zhuǎn)B組件傳參 使用params
<template>
<div> <!---只允許有一個(gè)最外層標(biāo)簽 ！-->
<div>
<p>{{message}}</p>
<p @click="toBFun">跳轉(zhuǎn)B組件啊啊</p>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
message: 'vue好帥昂健雳灵！'
}
},
methods: {
toBFun: function(){
this.$router.push({name:'B',params:{name:'xy',age:22}});
}
}
}
</script>
<style>
</style>
這時(shí)瀏覽器會(huì)顯示 ：http://localhost:8080/#/B/xy/22
在看下query 傳值及地址變化
this.$router.push({name:'B',query:{name:'xy',age:22}});
//這時(shí)瀏覽器會(huì)顯示 ： http://localhost:8080/#/?name=xy&age=22
注意：使用query時(shí)path應(yīng)改為path: '/B',
使用router-link傳參
<router-link :to="{ path: '/B',query:{name:'張飛',age:22}}">跳轉(zhuǎn)B組件</router-link>
//這時(shí)瀏覽器會(huì)顯示 ：http://localhost:8080/#/B?name=zzz&age=22
如何獲取地址的參數(shù)呢？
params：this.$route.params.name;
query:this.$route.query.name;
