传递参数有两种方式: 由 taskList.vue 点击view按钮 跳转至taskviewIndex;
1、push name+params;
this.$router.push({name:'taskViewIndex', params:{taskId:111, taskNameM:'first task name'}});2、push path+query;
this.$router.push({path:'./taskViewIndex', query:{taskId:111, taskNameM:'first task name'}});
methods: { show (index) { // this.$Modal.info({ // title: 'User Info', // content: `id:${this.rows[index].taskId}<br>name:${this.rows[index].taskName}<br>` // }); //传参方式一: 详情带name url显示传参 // this.$router.push({path:'./taskViewIndex', query:{taskId:111, taskNameM:'first task name'}}); //传参方式二: param带name 隐藏传参 this.$router.push({name:'taskViewIndex', params:{taskId:111, taskNameM:'first task name'}}); },其中 params 的使用 需要在router.js文件中注明 push时候要使用的name属性:
{ path: '/taskViewIndex/:taskId?', meta: { title: '' }, name:'taskViewIndex', component: (resolve) => require(['../views/task/viewTask/taskViewIndex.vue'], resolve) },在详情页面中 使用参数的方式如下:
<div class="camp_baseinfo"> <ul class="clearfix"> <li class="clearfix"> <!--<span class="bi_tit"><spring:message code="task.taskName"/>:</span>--> <span class="bi_tit">{{$t("taskName")}}:</span>- <span class="bi_cont">{{this.$route.params.taskNameM}}</span> <!--<span class="bi_cont">{{this.$route.query.taskNameM}}</span>--> </li>分别是 query 和params的取参方式。
其中query的参数会在请求url中显示出来;