第一种方式：动态路由参数
//当前页面的配置
<template>
<div>
//第一种跳转和传参的方式
<router-link to="/detail/aaa/12">跳转吧</router-link>
//第二种跳转传参的方式，使用事件
<button @click="goDetail">跳转吧</button>
<Navgation></Navgation>
</div>
</template>
<script>
import Navgation from '@/components/Navigation'
export default {
data(){
return{
}
},
methods: {
goDetail(){
this.$router.push('/detail/老王/23')
}
},
computed: {
},
components:{
Navgation
}
}
</script>
<style lang="less" scoped>
</style>
//要跳转到的页面
<template>
<div>
<div>这是详情页名字:{{name}}</div>
<div>这是详情页年龄:{{age}}</div>
</div>
</template>
<script>
export default {
data() {
return {
msg:""
}
},
created() {
this.name=this.$route.params.name
this.age=this.$route.params.age
console.log("msg",this.$route.params)
},
}
</script>
//路由的配置
{
path: "/detail/:name/:age",
name: "detail",
component: () =>
import ('@/components/Detail')
}
特点是：
1.刷新后，穿过来的参数不会消失
2.传递的参数信息会拼接在URL后面
3.不管通过<router-link to="/detail/aaa/12">跳转吧</router-link>还是this.$router.push('/detail/老王/23')，都可以实现相同的效果
效果：
效果图
第二种路由传参方式：通过name来匹配路由，通过param来传递参数
//当前页面
<template>
<div>
<button @click="goDetail">跳转吧</button>
<Navgation></Navgation>
</div>
</template>
<script>
import Navgation from '@/components/Navigation'
export default {
data(){
return{
}
},
methods: {
goDetail(){
this.$router.push({
name:'detail',
params:{
name:"小李子",
age:12
}
})
}
},
computed: {
},
components:{
Navgation
}
}
</script>
<style lang="less" scoped>
</style>
//要跳转到的页面
<template>
<div>
<div>这是详情页名字:{{name}}</div>
<div>这是详情页年龄:{{age}}</div>
</div>
</template>
<script>
export default {
data() {
return {
msg:""
}
},
created() {
this.name=this.$route.params.name
this.age=this.$route.params.age
console.log("msg",this.$route.params)
},
}
</script>
//路由的配置
{
path: "/detail",
name: "detail",
component: () =>
import ('@/components/Detail')
}
分析：刷新后，传过来的数据就没了
不拼接在URL地址栏上
当我们
效果图
效果图
第三种路由传参方式：path+query;query传递的参数会通过？id = xxx展示
//当前页面
<template>
<div>
<button @click="goDetail">跳转吧</button>
<Navgation></Navgation>
</div>
</template>
<script>
import Navgation from '@/components/Navigation'
export default {
data(){
return{
}
},
methods: {
goDetail(){
this.$router.push({
path:'/detail',
query:{
name:"刘能",
age:12
}
})
}
},
computed: {
},
components:{
Navgation
}
}
</script>
<style lang="less" scoped>
</style>
//要跳转到的页面
<template>
<div>
<div>这是详情页名字:{{name}}</div>
<div>这是详情页年龄:{{age}}</div>
</div>
</template>
<script>
export default {
data() {
return {
msg:""
}
},
created() {
this.name=this.$route.query.name
this.age=this.$route.query.age
console.log("msg",this.$route.query)
},
}
</script>
//路由的pe
{
path: "/detail",
name: "detail",
component: () =>
import ('@/components/Detail')
}
效果图：
效果图
分析：
1.传的参数拼接在URL后面
2.刷新后传过来的参数不会消失
