声明式：<router-link :to="...">
编程式：router.push(...)
主要实现：通过A组件跳转链接到B组件并且传参数
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组件，绑定一个@click事件，跳转B组件传参 使用params
<template>
<div> <!---只允许有一个最外层标签 ！-->
<div>
<p>{{message}}</p>
<p @click="toBFun">跳转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>
这时浏览器会显示 ：http://localhost:8080/#/B/xy/22
在看下query 传值及地址变化
this.$router.push({name:'B',query:{name:'xy',age:22}});
//这时浏览器会显示 ： http://localhost:8080/#/?name=xy&age=22
注意：使用query时path应改为path: '/B',
使用router-link传参
<router-link :to="{ path: '/B',query:{name:'张飞',age:22}}">跳转B组件</router-link>
//这时浏览器会显示 ：http://localhost:8080/#/B?name=zzz&age=22
如何获取地址的参数呢？
params：this.$route.params.name;
query:this.$route.query.name;
