<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!--query传参第一种写法:不推荐-->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> -->
<!--query第二种写法:对象写法-->
<!-- <router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{{ m.title }}
</router-link> -->
<!--query第三种写法:路由名称-->
<router-link :to="{
name:'xiangqing',//注意这里是name不是path
query:{
id:m.id,
title:m.title
}
}">
{{ m.title }}
<button @click="pushShow(m)"></button>
</router-link>
<!-- <router-link :to="{
name:'xiangqing',//注意这里是name不是path
params:{//这里是params不是query
id:m.id,
title:m.title
}
}">
{{ m.title }}
</router-link> -->
</li>
</ul>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'Message',
data(){
return {
messageList:[
{id:'001',title:'消息001'},
{id:'002',title:'消息002'},
{id:'003',title:'消息003'},
]
}
},
methods:{
pushShow(m){
this.$router.push({//如果要用replace将这里的push改掉即可
name:'xiangqing',//注意这里是name不是path
query:{
id:m.id,
title:m.title
}
});
},
back(){
//后退
this.$router.back()
},
forward(){
//前进
this.$router.forward()
},
test(){
//前进或后退几步，后退用负数
this.$router.go(3)
}
}
}
</script>
<style>
</style>
- 相关文章
- 热门文章
- win7中将文件拷贝到虚拟机linux下
- phpexcel设置行高及列宽,背景颜色,
- rabbitmq无法启动
- intellij idea不显示git push按钮
- php7中使用mongodb的aggregate进行
- centos7.4 64位下swoole安装及配置
- laravel页面静态化的方法
- navicate连接mycat报1184错误
- 单点登录sso原理及php实现方式及de
- devops-jenkins容器为pending状态
- 好评文章
- phpexcel设置行高及列宽,背景颜色,
- php7中使用mongodb的aggregate进行
- intellij idea打开文件所在文件夹
- windows下使用MongoDB Compass Com
- win7中将文件拷贝到虚拟机linux下
- laravel 中悲观锁 & 乐观锁的使用
- 单点登录sso原理及php实现方式及de
- navicate连接mycat报1184错误
- rabbitmq无法启动
- laravel整合dingo/api方法步骤:jwt
- 我的项目
- 【github】www.github.com/hurong241
- 【码云】gitee.com/hu_rong/projects
- 【docker hub】hub.docker.com/repositories/hurong241
- 【packagist】packagist.org/users/hurong241/packages
- 站点信息
- 建站时间：2011年
- 文章数：607篇
- 浏览数：944440
