引言

故事的背景：在一个页面内，通过路由给在同一个页面的组件传递参数。显然可以通过 Vue路由跳转伴随传递参数 这篇文章的多种方式进行传值。

---

路由传递参数的文件：label.vue

<router-link to='/Home/label/label_show' v-for="(item,index) in labels.label" :key="item">

methods: {
	        push_data(label) {
	            localStorage.setItem("label",label);	//将数据存在 localStorage 中
	        }
      	}

---

然而路由传递参数后，接收参数的那个页面必须通过 mounted 首次刷新后才生效，也就是说必须有刷新页面这一过程。
但是现在，我们路由传递是在同一个页面内，想要实时获取参数变化，就不能去刷新页面。

那么要怎么去获取呢？
首先我想的是把参数值存在 cookies 中，然后再通过读取获得值。当我运行后，发现 cookies 的值需要在 HTTP Request 请求下才更新（也就是要刷新页面，所以failed！）

接着，我想到用 localsStorage 去设置和读取值，localStorage 可以实时更新数据。当然它以 localStorage.get('name') 直接获取更新后的值。所以我就通过JS的定时器，定时10ms进行一次以 localStorage.get('name')方式的读值，这样就接近实时获取参数的值了。并且 localsStorage 的优点还是可以长时间存储该值，不会像cookie那样有一定的时间范围。

---

接收路由参数的文件：label_show.vue

mounted() {
        this.rd_article();
        this.getlabel();
        // console.log(localStorage.getItem('label'));
    },
methods:{
	      getlabel() {
	          const self = this;
	          // 通过定时器来实现 "实时" 获取 localStorage 的值 (优点:不需要刷新当前页面；缺点:有可能影响页面性能)
	          setInterval(function () {
	              var label = '';
	              label = localStorage.getItem('label'); // 获取 localstorage 中 label 的值
	              console.log(label);
	          },10);
	      }
      }

---

疑点：
因为这样的话当前浏览器内部就会持续高频繁地进行读取操作，不知道会不会构成性能影响。。。

---