1、需求：点击对应的message显示该message的详情
2、步骤
2.1、在src/router/index.js中配置路由时使用占位符指定需要的传参
/*
路由器模块
*/
// 引入Vue
import Vue from ‘vue‘
// 引入路由器插件
import VueRouter from ‘vue-router‘
// 引入路由组件
import About from ‘../views/About‘
import Home from ‘../views/Home‘
import News from ‘../views/News‘
import Message from ‘../views/Message‘
import MessageDetail from ‘../views/MessageDetail‘
// 声明使用路由器插件
Vue.use(VueRouter)
// 向外暴露路由器对象。这里为默认暴露，则引入的时候可使用任何名字
export default new VueRouter({
// 配置N个路由
// path指定路由地址
// component指定路由地址对应的路由组件
// redirect重定向到某个路由
routes: [
{
path: ‘/about‘,
component: About
},
{
path: ‘/home‘,
component: Home,
// children配置嵌套路由
children: [
{
path: ‘/home/news‘,
component: News
},
{
path: ‘message‘, // 等效于/home/message
component: Message,
children: [
{
path: ‘/home/message/detail/:id‘, // 使用占位符向路由组件传递参数，参数名为id
component: MessageDetail
}
]
},
{
path: ‘‘, // 路径/home时会自动跳转到路径/home/news
redirect: ‘/home/news‘
}
]
},
{
// 访问项目根路径时重定向到/about路由
path: ‘/‘,
redirect: ‘/about‘
}
]
})
2.2、在message详情组件的父组件Message组件中为message详情组件传参
<template>
<div>
<ul>
<li v-for="item in messages" :key="item.id">
<!--向message详情组件传参-->
<router-link :to="`/home/message/detail/${item.id}`">{{item.title}}</router-link>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
messages: []
}
},
mounted () {
setTimeout(() => {
this.messages = [
{
id: 1,
title: ‘message01‘
},
{
id: 2,
title: ‘message02‘
},
{
id: 3,
title: ‘message03‘
}
]
}, 1000)
}
}
</script>
<style scoped>
</style>
2.3、在message详情组件MessageDetail中通过$route获取传参的值
<template>
<ul>
<!--显示路由组件传参-->
<p>id:{{$route.params.id}}</p>
<li v-for="(value, key) in messageDetail" :key="key">
{{key}} : {{value}}
</li>
</ul>
</template>
<script>
export default {
data () {
return {
messageDetails: [],
messageDetail: {}
}
},
mounted () {
setTimeout(() => {
this.messageDetails = [
{
id: 1,
title: ‘message01‘,
content: ‘content01‘
},
{
id: 2,
title: ‘message02‘,
content: ‘content02‘
},
{
id: 3,
title: ‘message03‘,
content: ‘content03‘
}
]
// 数据的find方法，当detail.id === this.$route.params.id * 1成立时返回
// this.$route.params.id * 1 时将this.$route.params.id转为Number类型
this.messageDetail = this.messageDetails.find(detail => detail.id === this.$route.params.id * 1)
}, 1000)
},
watch: {
// 由于只有参数值发生变化时，不会重新加在路由组件
// 因此这里通过监视$route来实现重新加在路由组件的效果
$route: function (value) {
this.messageDetail = this.messageDetails.find(detail => detail.id === value.params.id * 1)
}
}
}
</script>
<style scoped>
</style>
3、使用query参数传参相关代码
3.1、src/router/index.js
/*
路由器模块
*/
// 引入Vue
import Vue from ‘vue‘
// 引入路由器插件
import VueRouter from ‘vue-router‘
// 引入路由组件
import About from ‘../views/About‘
import Home from ‘../views/Home‘
import News from ‘../views/News‘
import Message from ‘../views/Message‘
import MessageDetail from ‘../views/MessageDetail‘
// 声明使用路由器插件
Vue.use(VueRouter)
// 向外暴露路由器对象。这里为默认暴露，则引入的时候可使用任何名字
export default new VueRouter({
// 配置N个路由
// path指定路由地址
// component指定路由地址对应的路由组件
// redirect重定向到某个路由
routes: [
{
path: ‘/about‘,
component: About
},
{
path: ‘/home‘,
component: Home,
// children配置嵌套路由
children: [
{
path: ‘/home/news‘,
component: News
},
{
path: ‘message‘, // 等效于/home/message
component: Message,
children: [
{
path: ‘/home/message/detail‘,
component: MessageDetail
}
]
},
{
path: ‘‘, // 路径/home时会自动跳转到路径/home/news
redirect: ‘/home/news‘
}
]
},
{
// 访问项目根路径时重定向到/about路由
path: ‘/‘,
redirect: ‘/about‘
}
]
})
3.1、Message组件
<template>
<div>
<ul>
<li v-for="item in messages" :key="item.id">
<!--向message详情组件传参,使用query参数-->
<router-link :to="`/home/message/detail/?id=${item.id}`">{{item.title}}</router-link>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
messages: []
}
},
mounted () {
setTimeout(() => {
this.messages = [
{
id: 1,
title: ‘message01‘
},
{
id: 2,
title: ‘message02‘
},
{
id: 3,
title: ‘message03‘
}
]
}, 1000)
}
}
</script>
<style scoped>
</style>
3.2、MessageDetail组件
<template>
<ul>
<!--显示路由组件传参-->
<p>id:{{$route.query.id}}</p>
<li v-for="(value, key) in messageDetail" :key="key">
{{key}} : {{value}}
</li>
</ul>
</template>
<script>
export default {
data () {
return {
messageDetails: [],
messageDetail: {}
}
},
mounted () {
setTimeout(() => {
this.messageDetails = [
{
id: 1,
title: ‘message01‘,
content: ‘content01‘
},
{
id: 2,
title: ‘message02‘,
content: ‘content02‘
},
{
id: 3,
title: ‘message03‘,
content: ‘content03‘
}
]
// 数组的find方法，当detail.id === this.$route.query.id * 1成立时返回
// this.$route.query.id * 1 是将this.$route.query.id转为Number类型
this.messageDetail = this.messageDetails.find(detail => detail.id === this.$route.query.id * 1)
}, 1000)
},
watch: {
// 由于只有参数值发生变化时，不会重新加在路由组件
// 因此这里通过监视$route来实现重新加在路由组件的效果
$route: function (value) {
this.messageDetail = this.messageDetails.find(detail => detail.id === value.query.id * 1)
}
}
}
</script>
<style scoped>
</style>
4、通过<router-view msg="aaa"></router-view>向路由组件传参
备注：参数名只能为msg，且在路由组件中需通过props接收，比如props: [‘msg‘]
4.1、传参相关代码
<router-view msg="aaa"></router-view>
4.2、接收参数相关代码
<template>
<ul>
<!--显示通过router-view传参的参数值-->
<p>{{msg}}</p>
<!--显示路由组件传参-->
<p>id:{{$route.query.id}}</p>
<li v-for="(value, key) in messageDetail" :key="key">
{{key}} : {{value}}
</li>
</ul>
</template>
<script>
export default {
props: [‘msg‘], // 接收router-view传参
data () {
return {
messageDetails: [],
messageDetail: {}
}
},
mounted () {
setTimeout(() => {
this.messageDetails = [
{
id: 1,
title: ‘message01‘,
content: ‘content01‘
},
{
id: 2,
title: ‘message02‘,
content: ‘content02‘
},
{
id: 3,
title: ‘message03‘,
content: ‘content03‘
}
]
// 数组的find方法，当detail.id === this.$route.query.id * 1成立时返回
// this.$route.query.id * 1 是将this.$route.query.id转为Number类型
this.messageDetail = this.messageDetails.find(detail => detail.id === this.$route.query.id * 1)
}, 1000)
},
watch: {
// 由于只有参数值发生变化时，不会重新加在路由组件
// 因此这里通过监视$route来实现重新加在路由组件的效果
$route: function (value) {
this.messageDetail = this.messageDetails.find(detail => detail.id === value.query.id * 1)
}
}
}
</script>
<style scoped>
</style>
原文地址：https://www.cnblogs.com/liuyang-520/p/12681166.html
时间： 2024-08-30 00:15:07