当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue2导航根据路由传值,而改变导航内容的实例

vue2导航根据路由传值,而改变导航内容的实例

2017年12月01日  | 移动技术网IT编程  | 我要评论

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

公共导航代码如下：（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>

最后如下图：

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

以上这篇vue2导航根据路由传值,而改变导航内容的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网