为什么使用path:'/projectDetails/:data‘进行传参刷新后参数会丢失
如图为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
此为应用路由跳转的地方，将所需要传递的参数封装在data里做参数传递
在新的页面进行接参，
第一次时可以接到参数，
刷新之后参数就丢失了，这是为何？请赐教。
附上两个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.jpg" alt="为什么使用path:'/projectDetails/:data‘进行传参刷新后参数会丢失" 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.jpg" alt="为什么使用path:'/projectDetails/:data‘进行传参刷新后参数会丢失" 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.jpg" alt="为什么使用path:'/projectDetails/:data‘进行传参刷新后参数会丢失"
: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="为什么使用path:'/projectDetails/:data‘进行传参刷新后参数会丢失" 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="为什么使用path:'/projectDetails/:data‘进行传参刷新后参数会丢失" 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="为什么使用path:'/projectDetails/:data‘进行传参刷新后参数会丢失" 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="为什么使用path:'/projectDetails/:data‘进行传参刷新后参数会丢失" 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="为什么使用path:'/projectDetails/:data‘进行传参刷新后参数会丢失" 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="为什么使用path:'/projectDetails/:data‘进行传参刷新后参数会丢失" 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>
回答：
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)
// 拿到后台的结果后执行对应处理
}
以上是 为什么使用path:'/projectDetails/:data‘进行传参刷新后参数会丢失 的全部内容， 来源链接： utcz.com/p/935817.html
