功能描述

根据用户点击的按钮进入同一个页面展示详情内容，但是页面的路由标题需要和点击的按钮进行匹配，例如现在有四个按钮：按钮1，按钮2，按钮3，按钮4，跳转到对应的页面时路由的标题展示为：详情+按钮名称；

技术栈

Vue全家桶+ElementUI+ES6+Axios

实现

通过vue路由守卫的beforeRouteLeave方法实现；

...
<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:'测试1'},
          {id:1,text:'测试2'},
          {id:2,text:'测试3'},
          {id:3,text:'测试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>