功能描述

根據(jù)用戶點(diǎn)擊的按鈕進(jìn)入同一個(gè)頁面展示詳情內(nèi)容，但是頁面的路由標(biāo)題需要和點(diǎn)擊的按鈕進(jìn)行匹配，例如現(xiàn)在有四個(gè)按鈕：按鈕1，按鈕2，按鈕3，按鈕4，跳轉(zhuǎn)到對(duì)應(yīng)的頁面時(shí)路由的標(biāo)題展示為：詳情+按鈕名稱；

技術(shù)棧

Vue全家桶+ElementUI+ES6+Axios

實(shí)現(xiàn)

通過vue路由守衛(wèi)的beforeRouteLeave方法實(shí)現(xiàn)；

...
<template>
  <div>
    <el-button v-for="btn inbtnList " :key="btn.id" @click="toDetail(btn")>{{btn.text}}</el-button>
  </div>
</template>
<script>
 export default {
  name: 'listCmp',
  data() {
    return {
      btnList: [
          {id:0,text:'測(cè)試1'},
          {id:1,text:'測(cè)試2'},
          {id:2,text:'測(cè)試3'},
          {id:3,text:'測(cè)試4'}
      ],
      curBtn: null
    }
  },
  beforeRouteLeave(to,from,next) {
    to.meta.title = this.curBtn.text;
    next();
  },
  methods: {
    toDetail(btn) {
      this.curBtn = btn;
      this.$router.push({path:`${/detail}?id=${btn.id}`})
    }
  }
}
</script>