问题:vue.js路由跳转,跳转页面刷新后参数丢失,没有数据,怎么解决??
出现的情况:从新闻列表页面进入某一条新闻得详情页,需要在路由跳转时给详情页面发送该条新闻得ID,然后详情页获取ID想后台请求数据将内容展示,还有商品详情页等等~
下面写了一个小例子,是模拟项目的新闻列表和详情页,样式什么的随便
新闻列表页 - 点击新闻1 - 跳转到新闻1的详情页 ,但是刷新新闻详情页,获取到的id数据没有了~
新闻列表页面:部分代码,list是后台获取的数据,跳转时将参数ID传给details页面
<template>
<div id="list">
<ul>
<li v-for="(item,index) in list" :key="index">
<router-link :to="{name:'details',params:{id:item.id}}">
{{item.title}} <br/>
{{item.id}}
</router-link>
</li>
</ul>
</div>
</template>
新闻详情页:部分代码
<template>
<div id="details">
<ul>
<li>
新闻{{this.$route.params.id}}
的详情页
</li>
</ul>
</div>
</template>
解决一:可以解决刷新之后,获取到的数据消失,刷新之后,地址栏后面依然有id
地址栏:http://localhost:8080/#/details/1
{
path: '/details/:id',
name: 'details',
component: details
},
上述方法是项目结束后,发现的解决办法