vue-vue页面之间的传值

1. router-link标签跳转#

• 不需要传参

<router-link to='two'><button>点我到第二个页面</button></router-link>

• id传参

  • 传参页面

    <!--<router-link :to="{'path':'/要跳转的路由/','query':{'id':sect.id}}">上传课程</router-link>-->
    

  • 跳转页面

    data() {
          return {
            course:{},
            id :this.$route.query.id+ "/"  , #从路由中获取参数id
          },
    }
    

2.点击事件跳转#

• 不需要传参

html :
    <button @click="hreftwo" class="test-one">点我到第二个页面</button>js   :
    methods:{
         //跳转页面
         hreftwo(){
             this.$router.push({path:'/two'})
         }
     }

• 需要传参

  • 传参页面

  <template>
    <div>
      <div v-for="good in goods">
        <a>标题：{{good.title}}</a>
        <a v-if="uid">价格：{{good.v_price}}</a>
        <a v-else>价格：{{good.price}}</a>
        <a><img :src="'http://127.0.0.1:8000/'+good.img" style="width: 100px"></a>
        
        <button @click="add_order(good.title,good.price)">提交订单</button>
        <!--<router-link :to="{'path':'/order/','query':{'title':good.title,'price':good.price}}">提交订单</router-link>-->
        <div style="border:1px solid #CCC"></div>
      </div>
  
    </div>
  </template>
  
  <script>
    export default {
      name: "GoodsLIst",
      data() {
        return {
          goods: [],
          title:'',
          price:''
        }
      },
      methods: {
        add_order(title,price) {
          if (!this.uid) {
            this.$router.push('/login')
          } else {
               <!--// http://127.0.0.1:8080/order?title=***&price=***-->
            this.$router.push({path:'/order?title='+title+'&price='+price})
          }
        }
      }
  
    }
  </script>
  
  <style scoped>
  
  </style>
  
  

  • 跳转页面可以在要跳转的页面上使用this.$route.query.id, 从路由中获取参数

  data() {
        return {
          course:{},
          id :this.$route.query.id+ "/"  , #从路由中获取参数id
        },
  }