vue的三种传参方式

最新推荐文章于 2024-07-27 11:33:23 发布

avoidaily

最新推荐文章于 2024-07-27 11:33:23 发布

阅读量1.7k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/qq_43459224/article/details/105661547

版权

vue 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

传参：

页面式（html）标签路由跳转传参 ----- router-link（其实就是a标签）
js编程式路由跳转 ----- this.$router.push() // params query
路由组件传参 ----- 在路由配置中用分号拼接参数

获取参数：

this.$router.params ----- 搭配路由的name属性，参数作为路由的一部分，不会在url显示
this.$router.query ----- 使用path来匹配路由，可以在url看到？后面的就是传递的参数

一、router-link

<router-link :to="{path:'/news/detail',query:{id:1}}">详情</router-link>

使用path + 路径，query + 参数。则用this.$route.query.id取值。

<router-link :to="{name:'newsDetail',params:{id:1}}">详情</router-link>

使用name +路由名称，params + 参数。则用this.$route.params.id取值。

二、this.$router.push() ----- key,value键值对的形式

query 显示在url

// 传参
sendData(){
    this.$router.push({ 
        path: './describe', 
        query: { 
            id:id,
            title:title
        }
    })  
}

// 接收参数
this.$route.query.id
this.$route.query.title

params 不会显示在url

// 传参
sendData(){
    this.$router.push({ 
        name: './describe', 
        params: { 
            id:id,
            title:title
        }
    })  
}

// 接收参数
this.$route.params.id
this.$route.params.title

三、路由组件传参

路由部分：

let routes = [
{
    path: '/news',
    name: 'news',
    props: true,
    meta: {},
    component: () => import('@/page/news.vue')
},{
    path: '/newsDetail/:id',
    name: 'newsDetail',
    props: true,
    meta: {},
    component: () => import('@/page/newsDetail.vue')
}  
]

path后面跟占位符，props设置为波尔类型，true。跳转页面时使用this.$router.push传参。

下面是取值的方式

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '123
    }
  },
  props:['id'],
  mounted(){
    console.log(this.$route.params.id, this.id)
  }
}

取值时，方法1：可以直接使用this.$route.params.id取值。

方法2：也可以先放到props中，就可以直接用this.id拿到了。