Vue路由传参的几种方式

工作中有很多业务需求都是需要路由直接传递参数的，我们可以用缓存，也可以用vuex。但其实没有必要，vue路由有三种路由传参的基本方式,下面一起探索一下吧。

第一种方式

methods: {
    toB(id) {
        this.$router.push({
            path: `/demo2/${id}`
        })
    }
}

需要对应路由配置如下

{
    path: '/demo2/:id',
    component: () => import(/* webpackChunkName: "demo2" */ '../components/demo/Demo2.vue'),
    meta: { title: 'demo2' }
},

对应页面获取参数

mounted() {
    console.log(this.$route.params) // {id: "1"}
}

这种传递方式刷新页面传递的参数数据不会丢失

第二种方式

通过路由属性中的name来确定匹配的路由，通过params来传递参数。

methods: {
    toB(id) {
        this.$router.push({
            name: 'demo2',
            params: {
                id: id
            }
        })
    }
},

对应路由配置

{
    path: '/demo2',
    name: 'demo2',
    component: () => import(/* webpackChunkName: "demo2" */ '../components/demo/Demo2.vue'),
    meta: { title: 'demo2' }
},

对应页面获取参数和第一种方式是一样的。
这种路由传参方式当页面刷新后，传递的参数数据会丢失

第三种方式

通过路由属性中的path来确定匹配的路由，通过query来传递参数。

methods: {
    toB(id) {
        this.$router.push({
            path: '/demo2',
            query: {
                id: id
            }
        })
    }
},

对应路由配置

{
    path: '/demo2',
    name: 'demo2',
    component: () => import(/* webpackChunkName: "demo2" */ '../components/demo/Demo2.vue'),
    meta: { title: 'demo2' }
},

对应页面获取路由参数

mounted() {
    console.log(this.$route.query) // {id: "1"}
}

这种传递方式刷新页面传递的参数数据不会丢失