vue动态传参

最新推荐文章于 2025-07-03 11:56:45 发布

原创最新推荐文章于 2025-07-03 11:56:45 发布 · 713 阅读

0 ·

CC 4.0 BY-SA版权

博客介绍了Vue中路由传参的方法。方法一是传入多个参数，在router.js中使用vue - router，在path里反斜杠后加冒号表示路由参数，再到对应组件接收；还提及了方法二的父组件、子组件js结构及方法三的标签相关内容。

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

方法一:

传入多个参时:

<router-link to='/tr/uid/pid'>查看</router-link>

然后router.js:

import Vue from 'vue'

import Router from 'vue-router'

import tr from '@/components/tr.vue'

import tab from '@/components/tab.vue'

Vue.use(Router)

export default new Router({

routes: {

path:'/tr/:uid/:pid',

name: 'tr',

component:tr

}

})

需要在router.js 中使用vue-router,具体是在path:’/tr/:uid/:pid’, 反斜杠后加冒号，意思是后面就是路由的参数。

然后去对应tr.vue组件中接受这个路由参数：

通过实例的this.$route.params，可访问这个key-value对象，

 我们给请求路由赋个值看看：

<router-link to='/tr/15/122'>查看</router-link>

打印如下Object {uid: "15", pid: "122"}

方法二:

父组件结构:

<template>
  <div style="width: 200px;margin: 0 auto">
    <div v-for="(items,index) in subjects" :key="index" v-if="index<4">
      <div style="width: 200px;height: 220px;">
          <div style="width: 200px;height: 20px;">{{items.title}}</div>
          <img :src="items.images.large" alt="" style="width: 200px;height: 200px;">
      </div>
      <router-link :to="{name:'child',params:{id:items.id}}">
        <button style="margin: 10px 0 10px 0;cursor: pointer">查看详情</button>
      </router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

js:

export default {
  name: 'HelloWorld',
  data () {
    return {
      subjects: ''
    }
  },
  created () {
    this.axios.get('api/movie/in_theaters')
      .then((res) => {
        console.log(res)
        this.subjects = res.data.subjects
      })
  }
}

router路由index.js:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import route from '@/components/dong/route'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/child/:id',
      name: 'child',
      component: route
    },
  ]
})

子组件js:

<script>
    export default {
      name: "route",
      data () {
        return {
          id: '',
          msg: ''
        }
      },
      created () {
        this.id=this.$route.params.id;
        this.axios.get('api/movie/subject/'+this.id)
          .then((res)=>{
            console.log(res);
            this.msg=res.data
          })
      }
    }
</script>

方法三:

1.标签

<li v-for=" el in hotLins" >
    <router-link :to="{path:‘details‘,query: {id:el.tog_line_id}}">
        <img :src="el.image_list[0]">
        <h3>{{el.tourism_name}} {{el.tog_line_id}}</h3>
        <p>{{el.address}}</p>
    </router-link>
</li>
2.在组件中，需要传动态参数时，可以如上例子

<router-link :to="{path:‘details‘,query: {id:el.tog_line_id}}">

3.query中的参数id就是要传的参数，在组件中获取的方法为：

created: function() {
    var id = this.$route.query.id;
    this.getData(id);
 }，
4.如上述，this.$route.query.id就可以获取该参数，也可以通过，this.$root.id = id;传给父组件，父组件中通过

// 根组件构造器
    var vm = Vue.extend({
      router: router,
      data: function() {
        return {
          id: ‘11484‘ //城会玩明细id
        }
      }
    })
5.定义data中的id，然后子组件中用props传递参数

props: {
        id: {
          type: String,
          required: true
        }
      },
6.router-view中，传递该参数：

<router-view :id="id" :order-info="orderInfo">
</router-view>