vue-router query和params传参总结

路由配置index.js文件：

import Vue from 'vue';
import Router from 'vue-router'
import HelloWorld from "../components/HelloWorld";
import MyPage from "../components/MyPage";
import MyInfo from "../components/MyInfo";
Vue.use(Router)
export default new Router({
    routes: [
        {path: '/',component: HelloWorld},
        {path: '/my/:id?/:name?',component: MyPage,name: 'my',
            children:[
                {path: 'info',name:'info',component: MyInfo}
            ]
        }
    ]
})

注意： 须要传参的路径后，多个参数之间使用 / 分隔，如：path: '/my/:id?/:name?'，可解决params 传参刷新页面参数丢失（异常）问题

<router-link :to="{name:'my',params: {id: myId,name: myName}}">我的中心</router-link>

<!-- name: , params: 获取参数使用 $route.params.**-->

<router-link :to="{path:'/my',params: {id: myId,name: myName}}">我的中心</router-link>

<!-- path: '/**', params: 不可用，获取不到参数-->

<router-link :to="{name:'my',query: {id: myId,name: myName}}">我的中心</router-link>

<!-- name: , query: 获取参数使用 $route.query.**-->

<router-link :to="{path:'/my',query: {id: myId,name: myName}}">我的中心</router-link>

<!-- path: '/' , query: 获取参数使用 $route.query.-->

总结：param传参与query传参不一样

1.params传参时只能用name来指定路由的跳转，若用path:'/my',params 会被忽略，获取到的参数为undefined
2.获取参数使用：this.$route.params.**
3.params传入多个参数，刷新页面，参数会出现异常，参数之间使用 / 分隔 可解决问题
4.params传参地址栏路径：http://localhost:8080/#/my/123/jack，参数间使用/分隔，不显示参数的字段名（变量名），只显示值

5.query传参，name和path都可使用，
6.获取参数使用：this.$route.query.**
7.query传入多个参数，刷新页面，参数正常，参数格式?id=123&name=jack
8.query传参地址栏路径：http://localhost:8080/#/my?id=123&name=jack，参数以?开头，使用&拼接分隔，字段名与值均显示

补充：！若使用 to='/my/123/jack' 传参，默认使用params接收参数
！params传参，若是没有在路由中声明参数，那么参数不会在地址栏出现
！最好使用name来定义路由跳转地址，传入的参数最好与定义路由时的参数对应起来。
！定义路由时，是否指定参数、参数格式、是否（可选）带? 等，搭配不一样的传参方式，name、path、params、query等都会形成不一样的结果或异常，具体状况具体分析解决。