vue.js通过路由跳转传参，刷新页面参数丢失

问题：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}} &nbsp;
                的详情页
            </li>
        </ul>
    </div>
</template>

解决一：可以解决刷新之后，获取到的数据消失，刷新之后，地址栏后面依然有id

地址栏：http://localhost:8080/#/details/1

{
    path: '/details/:id',
    name: 'details',
    component: details
},

上述方法是项目结束后，发现的解决办法

解决二：项目中的时候，我是将id存在localStorage中，也可以解决路由传参刷新后，详情页获取不到数据的问题~