第一種方式：動態(tài)路由參數(shù)
//當前頁面的配置
<template>
<div>
//第一種跳轉(zhuǎn)和傳參的方式
<router-link to="/detail/aaa/12">跳轉(zhuǎn)吧</router-link>
//第二種跳轉(zhuǎn)傳參的方式，使用事件
<button @click="goDetail">跳轉(zhuǎn)吧</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>
//要跳轉(zhuǎn)到的頁面
<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.刷新后隐轩，穿過來的參數(shù)不會消失
2.傳遞的參數(shù)信息會拼接在URL后面
3.不管通過<router-link to="/detail/aaa/12">跳轉(zhuǎn)吧</router-link>還是this.$router.push('/detail/老王/23')刑赶，都可以實現(xiàn)相同的效果
效果：
效果圖
第二種路由傳參方式：通過name來匹配路由敌呈，通過param來傳遞參數(shù)
//當前頁面
<template>
<div>
<button @click="goDetail">跳轉(zhuǎn)吧</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>
//要跳轉(zhuǎn)到的頁面
<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')
}
分析：刷新后牡借，傳過來的數(shù)據(jù)就沒了
不拼接在URL地址欄上
當我們
效果圖
效果圖
第三種路由傳參方式：path+query;query傳遞的參數(shù)會通過酵使？id = xxx展示
//當前頁面
<template>
<div>
<button @click="goDetail">跳轉(zhuǎn)吧</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>
//要跳轉(zhuǎn)到的頁面
<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.傳的參數(shù)拼接在URL后面
2.刷新后傳過來的參數(shù)不會消失
