Vue中的传参

vue路由传参

一、普通方式
1、动态路由参数

//路由
    {
        path: '/pageDetail/:id',
        name: 'pageDetail',
        meta: {
            requireAuth: true, // 判断是否需要登录
        },
        component: resolve => require(['../views/page/pageDetail.vue'], resolve)
    },
    //页面使用
    <router-link to="/pageDetail/:id">详情</router-link>
    //获取参数
    this.$route.params.id

2、params传参（刷新数据丢失、使用时用name进行跳转）

    {
        path: '/pageDetail',
        name: 'pageDetail',
        meta: {
            requireAuth: true, // 判断是否需要登录
        },
        component: resolve => require(['../views/page/pageDetail.vue'], resolve)
    },
    //页面使用
    <div @click="$router.push({name: 'pageDetail',params: {id: 111})">详情</div>
    //获取参数
    this.$route.params.id

3、query传参，刷新页面数据不会丢失

    {
        path: '/pageDetail',
        name: 'pageDetail',
        meta: {
            requireAuth: true, // 判断是否需要登录
        },
        component: resolve => require(['../views/page/pageDetail.vue'], resolve)
    },
    //页面使用
    <div @click="$router.push({path: '/pageDetail',query: {id: 111})">详情</div>
    //获取参数
    this.$route.query.id

二、vue-router使用props传参
1、布尔模式

    {
        path: '/pageDetail',
        name: 'pageDetail',
        meta: {
            requireAuth: true, // 判断是否需要登录
        },
        component: resolve => require(['../views/page/pageDetail.vue'], 
       resolve),
       props: true //如果 props 被设置为 true，route.params 将会被设置为组件属性
    },
    //页面使用 跳转Detail
    <div @click="$router.push({name: 'pageDetail',params: {id: 111})">详情</div>
    //Detail页面使用props接收
    props: ['id']
    console.log(this.id) /// 打印出111

2、对象模式

    {
        path: '/pageDetail',
        name: 'pageDetail',
        meta: {
            requireAuth: true, // 判断是否需要登录
        },
        component: resolve => require(['../views/page/pageDetail.vue'], 
       resolve),
       props: { name:"test"}//如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
    },
    //页面使用 跳转Detail
    <div @click="$router.push({name: 'pageDetail',params: {id: 111})">详情</div>
    //Detail页面使用props接收
    props: ['name']
    console.log(this.name) //打印出test

3、函数模式

    {
        path: '/pageDetail',
        name: 'pageDetail',
        meta: {
            requireAuth: true, // 判断是否需要登录
        },
        component: resolve => require(['../views/page/pageDetail.vue'], 
       resolve),
       props: (route) => ({ query: route.query.id, params: route.params.name})//这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等
    },
    //页面使用 跳转Detail
    <div @click="$router.push({name: 'pageDetail',query: {id: 111}),params: {name:'test'}>详情</div>
    //Detail页面使用props接收
    props: ['query','params']
    console.log(this.query) //打印出111
    console.log(this.params) //打印出test

更多详情请查看vue-router官方文档