Vue Router传参

参考自：blog.csdn.net/mf_717714/a…

$router和$route的区别

//$router:是路由操作对象，只写对象
//$route：是路由信息对象，只读对象

//操作路由跳转
this.$router.push({
    name: 'hello',
    params: {
        name: 'word',
        age: '11'
    }
})

//读取路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

Vue Router传参分为params和query两种方法

用params传参，F5刷新会清空参数，而用query传参，由于参数是用路径传参的，所以F5刷新也不会清空参数。

params

• params的类型

  • 配置路由格式:/router/:id

  • 传递的方式：在path后面跟上对应的值

  • 传递后形成的路径：/router/123,router/abc

使用params传参只能使用name传入

// params传参，使用name
this.$router.push({
    name: 'first',
    params: {
        id: '1',
        name: 'params'
    }
})

// params接收参数
this.id = this.$route.params.id;
this.name = this.$route.params.name;

// 路由
{
    path: '/first/:id/:name',
    name: 'first',
    component: () => import('@/view/second')
}

(1)params是路由的一部分，必须要在路由后面添加参数。 (2)params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但在跳转的时候没传这个参数，就会导致跳转失败或页面没有内容。

query

• query的类型

  • 配置路由格式:/router，也就是普通配置

  • 传递的方式：在对象中使用query的key作为传递方式

  • 传递后形成的路径：/router?id=123,/router?id=abc

query可以通过name传参也可以通过path传参，效果相同。

path优先级高于name。

// query传参，使用name跳转
this.$router.push({
    name: 'second',
    query: {
        queryId: '2',
        queryName: 'query'
    }
})

// query传参，使用path跳转
this.$router.push({
    path: 'second',
    query: {
        queryId: '2',
        queryName: 'query'
    }
})

// query传参接收
this.queryId = this.$route.query.queryId;
this.queryName = this.$route.query.queryName;

总结

(1)传参可以使用params和query两种方式。 (2)params只可以使用name来引入路由，query可以使用name和path来引入路由。 (3)params是路由的一部分，必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也可以。 (4)query相当于get请求，页面跳转时，可以在地址栏看到请求参数，params相当于post请求，参数不会在地址栏中显示。