vue2导航根据路由传值，而改变导航内容

在项目中，一般我们的导航都是长的基本一致，只是内容会根据上个页面的内容而改变。那么我们只需要把顶部导航作为独立的公共组件，这样方便哪里需要哪里引入组件即可。公共导航代码如下：（mineHeader.vue）

<template>  <section class="listHeader">    <section class="header" @click="back()">      <img src="../../assets/main/back.png" alt="">      <p>{{mineHeaderData}}</p>    </section>  </section></template><script>export default {    name: 'MineHeader',    props:{        mineHeaderData:String    },    data () {        return {            msg: "个人资料的头部"        }    },    methods: {        back: function(){            this.$router.go('-1');        }    }}</script>

其次eg：在某个页面中，有三个模块，需要根据不同的模块跳转到一个公共的组件，但是头部内容，要跟模块内容匹配。如下：

<template>  <section class="tiket">    <section class="top" v-for="(item, index) in sortList" @click="toNext(index)">      <section>    <h3>{{item.list}}</h3>    <img src="../../assets/main/right.png">      </section>    <section class="middle">      <aside>    <p>可用</p>    <p>已用</p>    <p>过期</p>      </aside>    </section>    </section>  </section></template><style scoped></style><script>export default {    data() {        return {            sortList: [                {'list': '观影兑换券', },                {'list': '室内乐兑换券', },                {'list': '沙龙兑换券', }            ],        };    },    methods: {        toNext: function(index) {            sessionStorage.ticketName =this.sortList[index].list;            this.$router.push('/mine/tiketOrder');        }    },};</script>

最后界面如下：

       

然后我们需要点击每个模块，跳转到下个页面，并且导航内容也变成对应的内容。在其路由页面tiketOrder.vue页面需要如下写，

<template>  <section class="tiket">    <MineHeader :mineHeaderData='ticketName'></MineHeader>    <section class="top" v-for="(item, index) in sotList">      <section>    <h3>{{ticketName}}</h3>      </section>      <section class="middle">        <aside class="left">          <p>{{item.list}}</p>        <p>有效期</p>        </aside>      </section>    </section>  </section></template><script>import MineHeader from '../common/mineHeader.vue';export default {    name: 'tiketOrder',    data() {        return {            ticketName: '',            sotList: [                {'list': '可用', },                {'list': '已用', },                {'list': '过期', }            ],        };    },    components: {        MineHeader,    },    created() {        this.ticketName = sessionStorage.getItem('ticketName');    },};</script>

最后如下图：

这样就完成了。其实一个项目中，很多组件是可以复用的，这样我们可以少写很多组件。