为什么使用path:'/projectDetails/:data‘进行传参刷新后参数会丢失

心悦琴
  • 67

image.png
如图为router的js部分,我是想跳转路由的时候也带着数据

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)


// eslint-disable-next-line no-unused-vars
const router = new VueRouter({
    routes: [
        {
            path:"/",
            name:'login',
            component:()=>import("@/views/login/index1")
        },

        // {
        //     path:"/login",
        //     name:"login",
        //     component:()=>import("@/views/login/index")
        // },

        {
            // 查看个人信息
            path:'/readPersonalInfo',
            name:"readPersonalInfo",
            component:()=>import("@/views/personal-center/readPersonalInfo")
        },
        {
            //修改个人信息
            path:'/changePersonalInfo/:data',
            name:"changePersonalInfo",
            component:()=>import("@/views/personal-center/changePersonalInfo")
        },

        {
            // 管理员查看所有项目
            path:'/projectManagement',
            name:"projectManagement",
            component:()=>import("@/views/project-management/administrator/index")
        },
        {
            // 团队成员新增项目
            path:'/newProject/:data',
            name:'newProject',
            component:()=>import("@/views/project-management/teamUser/newProject")
        },
        {
            // 团队用户查看自己的项目
            path:'/readAllProject/:data',
            name:'readAllProject',
            component:()=>import("@/views/project-management/teamUser/readAllProject")

        },
        {
            path:'/projectDetail/:data',
            name:'projectDetail',
            component:()=>import("@/views/project-management/teamUser/projectDetail")
        },

        {
            path:"/register" ,
            // 这种写法不带路由参数,刷新之后
            // path:"/register/:data",     //带路由参数,如果不这样写,刷新会丢失

            name:"register",
            component:()=>import("@/views/register/index")
        },
        {
            path:'/home',
            name:'home',
            component:()=>import('@/views/home/index')
        }



    ],
    mode: "history",
})


export default router

此为router的index.js
image.png
此为应用路由跳转的地方,将所需要传递的参数封装在data里做参数传递
image.png
在新的页面进行接参,
第一次时可以接到参数,image.png
image.png
刷新之后参数就丢失了,这是为何?请赐教。
附上两个vue页面的代码

<template>
<layout>
    <div id="layout-inner">
      <a-breadcrumb style="margin:0;margin-top:10px;margin-left:16px;text-align: left">
        <a-divider type="vertical" style="background-color: #FF944B;width: 3px;border-radius: 8px"/>
        <a-breadcrumb-item>项目管理</a-breadcrumb-item>

      </a-breadcrumb>

      <a-layout-content
          :style="{ margin: '13px 16px',  background: '#fff', minHeight: '520px' }"
      >
        <div id="content">
          <div id="contentHeader">
            <img src="../../../icons/fileIcon.png" alt="fileIcon.png" class="cardIcon">
            <span class="cardTitle">全部项目</span>
            <a-row :gutter="16">
              <a-col :span="8"  >
                <a-card title="正在进行中的项目" :bordered="false" :style="cardBg">
                  <span>{{ this.OngoingProjects }}个</span>
                </a-card>
              </a-col>
              <a-col :span="8" >
                <a-card title="已结束的项目" :bordered="false" :style="cardBg2">
                  <span>{{ this.FinishedProjects }}个</span>
                </a-card>
              </a-col>

            </a-row>
          </div>

          <div id="formContent">



            <div class="search">
              <a-input-search   placeholder="请输入搜索内容" enter-button @search="onSearch" :style="search" />
            </div>



            <div class="projectTable">
             <template>


               <a-table :columns="columns"
                        :data-source="projectList"
                        :pagination="pagination"
                        :rowKey="record=>record.pId"
                        :style="{padding:'10px 0px',margin:'0px'}"
               >


                 <template slot="Id" slot-scope="text, record,index">
                   <span>{{ ((current-1)*5)+(index+1)}}</span>


                 </template>


                 <template slot="pState" slot-scope="text, record">
                   <div>
                     <a-tag v-if="record.pState===0" color="green">进行中</a-tag>
                     <a-tag v-if="record.pState===1" color="red">已结束</a-tag>
                   </div>
                 </template>

                 <template slot="pStart" slot-scope="text,record">
                   <span>{{ record.pStart | formatDate}}</span>
                 </template>

                 <template slot="pEnd" slot-scope="text,record">
                   <span>{{ record.pEnd | formatDate}}</span>
                 </template>


                 <template slot="action" slot-scope="text, record">
                   <a-button type="primary"
                             @click="projectDetail(record.pId)"
                             :style="{padding: '4px',fontSize: '10px'}">
                     查看详情
                   </a-button>


                 </template>

               </a-table>


             </template>
            </div>


          </div>
        </div>

      </a-layout-content>
    </div>
</layout>
</template>

<script>
import layout from "@/layout/index"
import {getAllProjectsByPages} from '@/api/project'
import {formatDate} from "@/utils/date";
import {countOngoingProjects} from "@/api/project"
import {countFinishedProjects} from "@/api/project"

const columns = [

  {
    title: '序号',
    dataIndex: 'Id',
    key: 'Id',
    width:'8%',
    scopedSlots: { customRender: 'Id' },
  },
  {
    title: '比赛名称',
    dataIndex: 'pRace',
    key: 'pRace',
    ellipsis: true,
    width:'20%',

    // scopedSlots: { customRender: 'competition' },需要插入另加定义的才写
  },
  {
    title: '项目名称',
    dataIndex: 'pName',
    key: 'pName',
    width:'15%',
    // width: 200,
    ellipsis: true,
    // ellipsis    显示省略符号来代表被修剪的文本。
  },
  {
    title: '负责人',
    dataIndex: 'uName',
    key: 'uName',
    // width:90
    width:'10%',
  },
  {
    title: '项目状态',
    key: 'pState',
    dataIndex: 'pState',
    scopedSlots: { customRender: 'pState' },

    width:'10%',
  },

  {
    title: '开始日期',
    dataIndex: 'pStart',
    key: 'pStart',

    width:'15%',
    scopedSlots: { customRender: 'pStart' },
  },

  {
    title: '截止日期',
    dataIndex: 'pEnd',
    key: 'pEnd',
    scopedSlots: { customRender: 'pEnd' },
    width:'15%',

  },
  {
    title: '操作',
    key:'action',
    dataIndex: 'action',
    scopedSlots: {customRender: 'action'},
    width:'10%',
  },

];

export default {
  name: "index",

  data(){
    return{

      OngoingProjects:null,
      FinishedProjects:null,
      // 0是团队用户,1是管理员
      u_identity:this.$route.params.u_identity,
      projectList:[],
      columns,
      current:1,

      pagination: {
        current:1,
        onChange: page => {
          console.log('现在是第几页page:',page);
          this.current=page;
          console.log("this.current是当前的页数:",this.current)
          this.getAllProjectsByPages(page,this.pagination.pageSize)
        },
        pageSize: 5,
        total:0,
        // total所有记录总数
        // pageSize: 5,一页有5行

      },
      //卡片样式背景
      cardBg:{
        backgroundImage: "url("+require("../../../assets/images/cardBg.jpg")+")",
        backgroundSize: 'cover',
        opacity:'0.75',
        color:'white',
        fontSize:'18px',
      },
      cardBg2:{
        backgroundImage: "url("+require("../../../assets/images/cardBg2.jpg")+")",
        backgroundSize: 'cover',
        opacity:'0.75',
        color:'white',
        fontSize:'18px',
      },
      cardBg3:{
        backgroundImage: "url("+require("../../../assets/images/cardBg3.jpg")+")",
        backgroundSize: 'cover',
        opacity:'0.75',
        color:'white',
        fontSize:'18px',
      },


    }
  },
  components:{
    layout
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy年MM月dd日');
    }
  },

  mounted() {
    this.countOngoingProjects();
    this.countFinishedProjects();
    this.getAllProjectsByPages(1,this.pagination.pageSize);


  },
  methods:{
    countFinishedProjects(){
      countFinishedProjects().then(res=>{
        console.log("res:",res)
        console.log("从后端获取到的已结束的项目个数:",res.data.FinishedProjects)
        this.FinishedProjects=res.data.FinishedProjects
      })


    },




    countOngoingProjects(){
      console.log("获取正在进行中的项目个数")
      countOngoingProjects().then(res=>{
        console.log("res:",res)
        console.log("正在进行的项目个数:",res.data.OngoingProjects)
        this.OngoingProjects=res.data.OngoingProjects
        console.log("我要在前端展示的项目个数:",this.OngoingProjects)

      })

    },




    // 分页获取所有项目列表
    getAllProjectsByPages(page,pageSize){
      return new Promise((resolve, reject) => {
        getAllProjectsByPages(page, pageSize).then(res => {
          console.log("我回来啦,带来了res:",res)
          console.log("res.data.list:",res.data.list)
          this.projectList=res.data.list
          console.log('this.projectList:',this.projectList)
          this.pagination.total=res.data.totalRow
          console.log("现有的总数据条数this.pagination.total:",this.pagination.total)

          // console.log("打算查看详情的pId:",this.projectList.index.pId)
          resolve()

        }).catch(err => {
          reject(err)
        })
      })
    },

    projectDetail(pId){

      console.log("打算查看详情的pId:",pId)
      this.$router.push({name:'projectDetail',params: { data:{pId:pId}}})
    },

  }




};

</script>

<style scoped>
/deep/.ant-table-thead > tr > th{
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  background: rgba(246, 249, 255, 1);

}

/deep/.ant-table-tbody > tr > td {
  text-align: center;
  font-size: 13px;
}



div#contentHeader{
  box-shadow:#BBBBBB 0px 0px 10px;
  padding:10px 20px;
  margin-bottom: 30px;

}


span.cardTitle{
  font-size:15px;
  font-weight: bold;

}

img.cardIcon{
  width:30px;
  height:30px;
  margin:5px
}

div#formContent{
  box-shadow:#BBBBBB 0px 0px 10px;
  padding:10px 5px;
}


div.search{
  float:right;
  margin-bottom: 20px;
}


div.projectTable{
  margin:10px;
  margin-top:20px
}


span.cardContent{
  font-size:14px;



}


div.textContent{

  padding:0px 10px;
  margin-bottom: 10px;
}

</style>
<template>
  <layout>
  <div id="layout-inner">
    <a-breadcrumb style="margin:0;margin-top:10px;margin-left:16px;text-align: left">
      <a-divider type="vertical" style="background-color: #FF944B;display:inline-block;width: 3px;border-radius: 8px"/>

      <div v-if="u_identity===1" style="display: inline-block">
        <router-link :to="{ path: '/projectManagement'}">
          <a-breadcrumb-item>项目管理</a-breadcrumb-item>
        </router-link>
        查看项目信息
      </div>

      <div v-else>
        <router-link :to="{ path: '/readAllProject/:data'}">
          <a-breadcrumb-item>项目中心</a-breadcrumb-item>
        </router-link>
        查看项目信息
      </div>


    </a-breadcrumb>

    <a-layout-content
        :style="{ margin: '13px 16px', background: '#fff', minHeight: '520px' }"
    >
      <div id="content">
        <div id="contentHeader">
          <img src="../../../icons/icon.png" alt="icon.png" class="cardIcon">
          <span class="cardTitle" :style="{fontSize:'18px'}">项目标题</span>
          <button v-if="this.u_identity==='0'" class="endProject"  >结束项目</button>
          <a-divider :style="{marginTop:'5px',marginBottom:'10px'}"/>

          <div id="headerInner">
            <img src="../../../assets/images/project.png" alt="project.png" height="116" width="116"
                 :style="{margin:'0px'}"/>

            <div id="textPart">
              <div class="part">
                <span  class="partTitle">项目成员</span>
                <br/>
                <span class="partContent">5</span>
              </div>

              <div class="part">
                <span class="partTitle">剩余工期</span>
                <br/>
                <span class="partContent" style="color:#D28B17">3</span>
              </div>

              <div class="part">
                <span  class="partTitle">项目状态</span>
                <br/>
                <span class="partContent" style="color:#3C8824">进行中</span>
              </div>

              <a-divider type="vertical" :style="{height:'150px',marginRight:'0px',paddingRight:'0px'}"/>

              <div id="innerRight">
                <ul>
                  <li>
                    <div class="liPart">
                      <label class="label">项目类型:</label>
                      <span class="labelContent">{{ this.item.projectType }}</span>
                    </div>
                    <div class="liPart">
                      <label class="label">负责人:</label>
                      <span class="labelContent">the shy</span>
                    </div>



                      <a-button type="primary" v-if="this.u_identity==='0'" @click="() => edit(this.projectType)" :style="{float:'right',margin:'0px'}" >
                        编辑
                      </a-button>

                  </li>

                  <li>
                    <div class="liPart">
                      <label class="label">项目工期:</label>
                      <span class="labelContent">133天</span>
                    </div>

                  </li>

                  <li>
                    <div class="liPart">
                      <label class="label">开始日期:</label>
                      <span class="labelContent">2020-12-20</span>
                    </div>
                    <div class="liPart">
                      <label class="label">截止日期:</label>
                      <span class="labelContent">2021-11-23</span>
                    </div>
                  </li>

                  <li>
                    <div class="liPart">
                      <label class="label">比赛名称:</label>
                      <span class="labelContent">中国大学生服务外包创新创业大赛</span>
                    </div>

                  </li>

                  <li>
                    <div class="liPart">
                      <label class="label">奖金:</label>
                      <span class="labelContent">------</span>
                    </div>
                    <div class="liPart">
                      <label class="label">奖项:</label>
                      <span class="labelContent">------</span>
                    </div>
                  </li>


                </ul>
              </div>




            </div>
          </div>
        </div>

        <div id="formContent" :style="{paddingTop:'5px'}">
          <a-card
              style="width:100%;,backgroundColor:'#FBFBFB'"
              :style="{}"
              :headStyle="{fontWeight:'bold',paddingTop:'0px'}"
              :bordered="false"
              :tab-list="tabListNoTitle"
              :active-tab-key="noTitleKey"
              @tabChange="key => onTabChange(key, 'noTitleKey')"
          >

            <span v-if="noTitleKey === 'projectMember'">
            <a-button type="primary" v-if="this.u_identity==='0'"  :style="{marginTop:'0px',marginBottom:'10px'}">
              编辑
            </a-button>

            <template>
              <div>
                <a-row :gutter="20">
                  <a-col :span="4">
                    <a-card  :bordered="true"  :headStyle="{borderBottom:'0px'}">
                      <img src="../../../assets/images/avatar.jpg" alt="avatar.jpg" class="avatar"/>
                      <div class="memberName">jackeylove</div>
                    </a-card>
                  </a-col>

                  <a-col :span="4">
                    <a-card :bordered="true"  :headStyle="{borderBottom:'0px'}">
                      <img src="../../../assets/images/avatar.jpg" alt="avatar.jpg" class="avatar"/>
                      <div class="memberName">jackeylove</div>
                    </a-card>
                  </a-col>

                  <a-col :span="4">
                    <a-card :bordered="true"  :headStyle="{borderBottom:'0px'}">
                      <img src="../../../assets/images/avatar.jpg" alt="avatar.jpg" class="avatar"/>
                      <div class="memberName">jackeylove</div>
                    </a-card>
                  </a-col>

                  <a-col :span="4">
                    <a-card :bordered="true"  :headStyle="{borderBottom:'0px'}">
                      <img src="../../../assets/images/avatar.jpg" alt="avatar.jpg" class="avatar"/>
                      <div class="memberName">jackeylove</div>
                    </a-card>
                  </a-col>

                  <a-col :span="4">
                    <a-card :bordered="true"  :headStyle="{borderBottom:'0px'}">
                      <img src="../../../assets/images/avatar.jpg" alt="avatar.jpg" class="avatar"/>
                      <div class="memberName">jackeylove</div>
                    </a-card>
                  </a-col>

                  <a-col :span="4">
                    <a-card :bordered="true"  :headStyle="{borderBottom:'0px'}">
                      <img src="../../../assets/images/avatar.jpg" alt="avatar.jpg" class="avatar"/>
                      <div class="memberName">jackeylove</div>
                    </a-card>
                  </a-col>


                </a-row>
              </div>
            </template>
            </span>

            <span v-if="noTitleKey === 'projectBrief'">
              <a-button type="primary" v-if="this.u_identity==='0'"  :style="{marginTop:'0px',marginBottom:'10px'}">
              编辑
            </a-button>

              <p>
                项目简介。。。。。。。。。
              </p>
            </span>

          </a-card>
        </div>

      </div>
    </a-layout-content>
  </div>
  </layout>
</template>

<script>
import layout from "@/layout/index"

export default {
name: "projectDetail",
  data(){
  return{
    // pId:this.$route.params.data.pId,
    // 1是团队用户,0是管理员
    u_identity:this.$store.state.identity,
    item:{
        projectType:'veysudbwij',
    },
    tabListNoTitle: [

      {
        key: 'projectMember',
        tab: '团队成员',
      },
      {
        key: 'projectBrief',
        tab: '项目简介',
      },

    ],

    noTitleKey: 'projectMember',
  }



  },
  components:{
    layout
  },
  mounted() {
  console.log("从项目管理页面传过来的pId:",this.$route.params.data.pId)
      // this.getProjectsDetails()

  },
  methods: {
    getProjectsDetails(){
      console.log("现在的pId:",this.pId)
      // getProjectsDetails(this.pId)


    },

    onTabChange(key, type) {
      console.log(key, type);
      this[type] = key;
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
  },


  }
</script>

<style scoped>
div#contentHeader{
  box-shadow:#BBBBBB 0px 0px 10px;
  padding:10px 20px;
  margin-bottom: 30px;

}

img.cardIcon{
  width:30px;
  height:30px;
  margin:5px
}

span.cardTitle{
  font-size:15px;
  font-weight: bold;
}

div#textPart{
  display: flex;
  margin:10px;
  margin-bottom: 0px;
}

div#headerInner{
  display: flex;
}

div.part{
  margin:10px;
  margin-bottom: 5px;
  padding-bottom:8px
}

span.partTitle{

  font-size: 20px;
}

span.partContent{
  font-size: 16px;
  padding:0px 10px;
  font-weight: bold;
  padding-left:20px;
  padding-top:20px;
  text-align: center;
}

ul,li{
  list-style: none;
  margin:10px;
  padding:0px;
  margin-top:0px

}

span.labelContent{
  margin-right:20px;
  /*font-weight:bold;*/
  font-size:15px
}

div.liPart{
  display: inline;
  margin:10px 0px;
  margin-right: 50px;

}

button.endProject{
  float:right;
  background-color: #6791F4;
  color: #FFFFFF;

  border-radius: 10px;
  font-family: 'Source Sans Pro', sans-serif;

  outline: none;

}



button.endProject:hover{
  font-weight: bold;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);

}

button.endProject:active {
  transform: translateY(4px);
}
/* active 设置点击状态时对象沿Y轴平移 */

div#formContent{
  box-shadow:#BBBBBB 0px 0px 10px;
  padding:10px 5px;
}

img.avatar{
  padding:0px;
  width:80px;
  height:80px;
  border-radius: 100%;
  margin:0 auto;
  margin-bottom:10px
}

div.memberName{
  font-size: 16px;
  text-align: center;
}


</style>
回复
阅读 699
2 个回答

this.$router.push({name:'projectDetail',params: { data:{pId:pId}}})
这句话错了,你的路由并不是正确的/projectDetail/1111,可改为:
this.$router.push({name:'projectDetail',params: { data: pId}})

记住使用params传的参数想刷新后显示,参数必须映射在路由上,比如路由为/projectDetail/:data,那么你传参则是params的data的值,不要放对象,path会被转义的,多个值的话建议使用query传

你在URL上,传递的是一个Object,不建议这样玩,建议是传递一个关键字段,然后用这个关键字段去获取对应的数据信息。
// 路由定义
{
 name:"changePersonalInfo"
 path:'/changePersonalInfo/:id'
}
// 页面跳转
this.$router.push({
 name:"changePersonalInfo",
 params:{
  id:personalId
 }
})
// 获取地址栏的个人信息ID数据
const userId = this.$route.params.id;
// 使用数据请求,从后台获取当前用户的个人数据信息
async getUserInfo(){
 const res = await axios.xxx.xxx(xxx,{id:userId})
 // 拿到用户信息后,界面执行处理。
 this.userData = res
},
async updateUserInfo(){
 const res = await axios.xxx.xxx(xxx,this.userData)
 // 拿到后台的结果后执行对应处理
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏