vue2中怎么根据路由传值-创新互联

这篇文章将为大家详细讲解有关vue2中怎么根据路由传值,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

专注于为中小企业提供网站设计、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业洮南免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000多家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

公共导航代码如下:(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>
  <h4>{{item.list}}</h4>
  <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>

最后界面如下:

vue2中怎么根据路由传值

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

<template>
 <section class="tiket">
 <MineHeader :mineHeaderData='ticketName'></MineHeader>
 <section class="top" v-for="(item, index) in sotList">
  <section>
  <h4>{{ticketName}}</h4>
  </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中怎么根据路由传值

关于vue2中怎么根据路由传值就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。

网页标题:vue2中怎么根据路由传值-创新互联
网站网址:https://www.cdcxhl.com/article4/dihgie.html

成都网站建设公司_创新互联,为您提供网站制作网站导航外贸网站建设网站设计软件开发云服务器

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

网站托管运营