传递单个参数

• 方法一 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')
    }]
})

    <router-link :to='"/detail/"+item.id' class="item" tag="div" v-for="(item, index) in dataList" :key="index">

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')
    }]
})

    <router-link :to='"/detail/"+item.id' class="item" tag="div" v-for="(item, index) in dataList" :key="index">

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')
    }]
})

    <router-link :to='"/detail?id="+item.id' class="item" tag="div" v-for="(item, index) in dataList" :key="index">

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')
    }]
})

    <router-link :to='`/detail/${item.id}/aaa`' class="item" tag="div" v-for="(item, index) in dataList" :key="index">

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

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

    <router-link :to='`/detail?id=${item.id}&name=aaa`' class="item" tag="div" v-for="(item, index) in dataList" :key="index">

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