vue设置获取路由参数

一、router-link 标签url直接添加参数

1、路由设置

import PageB from '@/pages/PageB'
{
    path: '/b',
    name: 'PageB',
    component: PageB
}

2、设置参数

<router-link :to="'/b?name=张三&id=1234'">路由测试</router-link>

3、获取参数

this.$route.query

二、query参数配置

1、路由设置

import PageB from '@/pages/PageB'
{
    path: '/b',
    name: 'PageB',
    component: PageB
}

2、设置参数

<router-link :to="{ name:'PageB',query:{name :'张三'} }">路由测试</router-link>
或者
<router-link :to="{ path:'/b',query:{name :'张三'} }">路由测试</router-link>

3、获取参数

this.$route.query

三、params参数配置

1、路由设置

import PageB from '@/pages/PageB'
{
    path: '/b?name=:name',
    name: 'PageB',
    component: PageB
}

注意：params方式配置路由参数时需要使用 :参数名 

2、设置参数

<router-link :to="{ name:'PageB',params:{name :'张三'} }">路由测试</router-link>

注意：params方式配置路由参数时只能写路由名（name），不能写路径（path）

3、获取参数

this.$route.params

四、$router.push 传参

1、路由设置

import PageB from '@/pages/PageB'
{
    path: '/b',
    name: 'PageB',
    component: PageB
}
或者
{
    path: '/b?name=:name',
    name: 'PageB',
    component: PageB
}

2、设置获取参数

this.$router.push({
        name: 'PageB',
        params: { id: 123, name: '李四' }
      })

this.$router.push({
        // name: 'PageB',
        path: '/b',
        query: { id: 123, name: '李四' }
      })

this.$router.push({
        name: 'PageB',
        // path: '/b',
        query: { id: 123, name: '李四' }
      })

五、总结

1、$router：路由操作对象 ，只写对象。

2、$route：路由信息对象，只读对象。

3、无论是 router-link 标签，还是 $router.push 方式。用 query 参数配置的，就用 this.$route.query 获取；用 params 参数配置的，就用 this.$route.params 获取。

4、router-link 中 params 配置的无法使用url路径（path），$router.push 中 params 配置的可以使用url路径（path）。