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

最新推荐文章于 2025-07-07 08:24:38 发布

原创

最新推荐文章于 2025-07-07 08:24:38 发布 · 5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #导航 #vue2 #web app #html5

本文介绍如何在Vue2应用中，通过路由传值实现导航条内容随着页面跳转而动态变化。在tiketOrder.vue页面中进行特定设置，即可完成这一功能，提高代码复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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