新手运用vue-router传参时注意事项

2019年9月1日 196次阅读 来源: JoySang

1. 运用name和params组合传参

this.$router.push({name: 'details', params: {'id': 233}})

路由设置

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/details',
            name: 'details',
            component: resolve => require(['../components/details'], resolve)
        }
    ]
})

猎取参数

this.$route.params.id // 233

《新手运用vue-router传参时注意事项》

革新参数丧失 显现 undefined

this.$route.params.id // undefined

《新手运用vue-router传参时注意事项》

注重：此要领第一次跳转是没有题目的，参数也能够传过去，然则革新页面后，参数就没了 (ps: 这个处所实在另有一个题目，当你通报的参数是number范例，第一次是没有题目的，猎取的时刻也是number范例，然则当你革新页面后，number变成string范例，假如触及盘算的发起先范例转换一下)

第一次是预期效果 // 234

console.log(this.$route.params.id + 1)

《新手运用vue-router传参时注意事项》

革新页面后直接字符串拼接了 // 2331

《新手运用vue-router传参时注意事项》

参数丧失解决方案：

routes: [
        {
            path: '/details/:id', // 这里设置的要和你通报的参数名保持一致
            name: 'details',
            component: resolve => require(['../components/details'], resolve)
        }
    ]

2. path和query组合传参

this.$router.push({path: '/details', query: {id: 666}})
this.$route.query.id // 666

《新手运用vue-router传参时注意事项》

此要领参数会跟在问号背面 比方：/details?id=666，该要领革新页面不会丧失参数

末了：依据本身的项目选择适宜的传参体式格局

官方文档 vue-router

    原文作者：JoySang
    原文地址: https://segmentfault.com/a/1190000019398133
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞