VueRouter传参

传递单个参数

• 方法一 router中的path后面加一个变量，传递的参数放在router-link中的to里，组件使用时通过this.$route.params接受传值

let router = new VueRouter({
    routes: [{
        path: '/detail/:id',
        meta: { name: 'home' },
        component: () => import(/*WebpackChunkName:'zzz'*/ '@/page/Detail')
    }]
})

computed: {
    queryId() {
      return this.$route.params.id;
    }
  },

• 方法二 router中的path后面加一个变量，传递的参数放在router-link中的to里，设置props为true，组件通过props接收

let router = new VueRouter({
    routes: [{
        path: '/detail/:id',
        props:true,
        meta: { name: 'home' },
        component: () => import(/*WebpackChunkName:'zzz'*/ '@/page/Detail')
    }]
})

export default {
  props:['id']
};

• 方法三 router-link中直接通过"/detail?id="+item.id的形式传递，通过this.$route.query接收

let router = new VueRouter({
    routes: [{
        path: '/home',
        meta: { name: 'home' },
        component: () => import(/*WebpackChunkName:'zzz'*/ '@/page/Home')
    }, {
        path: '/detail',
        meta: { name: 'home' },
        component: () => import(/*WebpackChunkName:'zzz'*/ '@/page/Detail')
    }]
})

computed: {
    queryId() {
      return this.$route.query.id;
    }
  },

传递多个参数

• 方法一 router中通过/拼接两个变量，通过props或者this.$route.params接收

let router = new VueRouter({
    routes: [{
        path: '/detail/:id/:name',
        props:true,
        meta: { name: 'home' },
        component: () => import(/*WebpackChunkName:'zzz'*/ '@/page/Detail')
    }]
})

 props:['id','name'],

• 方法二 通过&拼接两个变量，组件中用this.$route.query接收

computed: {
    queryId() {
      return this.$route.query.id;
    },
    name(){
      return this.$route.query.name;
    }
  },