Vue路由到新的页面，页面的名称需要改变

如下图：在页面中点击“属性列表”和“参数列表”的时候，要路由到新的页面，之后页面的title不用路由中的名称，而是用新的名称。也就是要显示对应的按钮名称，这个路由地址的名称是动态的。

 

 在旧的页面上加上：beforeRouteLeave ，对应的title就是data中的数据，就可以动态变化了。

当然还有其他方式。暂且研究这一种很好用，记录一下。

 data() {

      return {

        list: null,

        total: null,

        listLoading: true,

        listQuery: {

          pageNum: 1,

          pageSize: 5

        },

        dialogVisible: false,

        dialogTitle:'',

        productAttrCate:{

          name:'',

          id:null

        },

        title:'',

        rules: {

          name: [

            { required: true, message: '请输入类型名称', trigger: 'blur' }

          ]

        }

      }

    },

 

created() {

      this.getList();

    },

    beforeRouteLeave(to,from,next) {

    to.meta.title = this.title;

    next();

    },

    methods: {

      getList() {

        this.listLoading = true;

        fetchList(this.listQuery).then(response => {

          this.listLoading = false;

          this.list = response.data.list;

          this.total = response.data.total;

        });

      },

在点击按钮对应的方法上加：

 getAttrList(index, row) {

        this.title = "属性列表";

        this.$router.push({path: '/pms/productAttrList',query:{cid:row.id,cname:row.name,type:0}}) // type为0：规格

      },