向路由组件传递参数2种方法
程序员文章站
2022-05-11 14:21:08
方式1:路由路径携带参数(param/query) 1) 配置路由 2) 路由路径 3) 路由组件中读取请求参数 方式2:属性携带数据 ,这个是app.vue 使用方法: ......
方式1:路由路径携带参数(param/query)
1) 配置路由
children:[ { path:'/home/message/detail/:id', component:messagedetail } ]
2) 路由路径
<router-link :to="'/home/message/detail/'+message.id">{{message.title}}</router-link>
3) 路由组件中读取请求参数
this.$route.params.id
方式2:<router-view>属性携带数据 ,这个是app.vue
<template> <div> <div class="row"> <h2>router-aa</h2> </div> <div class="row"> <div class="col-md-2 col-md-offset-9"> <div class="list-group"> <router-link to="/about" class="list-group-list">about</router-link> <router-link to="/home" class="list-group-list">home</router-link> </div> </div> </div> <div class="row"> <div class="col-md-6 md-offset-6"> <div class="panel"> <div class="panel-body"> <keep-alive> <router-view msg="abc"></router-view> </keep-alive> </div> </div> </div> </div> </div> </template> <script> </script> <style> h2{ width: 100%; text-align: center; margin-top: 20px; } .list-group-list{ border:1px solid #ddd; color: #000; padding: 10px; margin-left: 30px; } .list-group-list:link{ text-decoration: none; } .list-group-list:hover{ color: #000; } .list-group-list:nth-child(1){ border-bottom: none!important; } .panel{ border-bottom: 1px solid #ddd; } .router-link-active{ color: red; } </style>
<router-view :msg="msg"></router-view>
使用方法:
<template> <div> <h2>我是about组件</h2> <input type="text" style="width:200px;border:1px solid #ddd;margin-left:30px;"> <p>{{msg}}</p> <hr/> </div> </template> <script> export default{ props:{ msg:string } } </script> <style> h2{ color: red; } </style>
上一篇: mysql初次启动相关配置