VUE界面传参方式

传递参数有两种方式: 由 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中显示出来；