vue路由传参以及组件取参

1、通过页面路由跳转，页面访问格式为http://XX/XX/details/001

路由跳转代码

this.$router.push('/details/001’)

// 带有路径的对象

this.$router.push({path: '/details/001'})

// 命名路由，路由配置时，需要 name 字段

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

页面访问url后缀格式：

/details/001

路由定义时，在path属性中添加/:id 后缀，id为传递参数命名

path： details/:id

页面取数通过params对象获取：

this.$route.params.id

2、通过页面路由跳转，页面访问格式为http://XX/XX/details?id=001

路由跳转代码

this.$router.push({ name: 'details', query: { id: '001' } })

页面访问：

/details?id=001

路由定义:

path：details

页面取数：

this.$route.query.id

3、两种方式接口

this.$router.push({ name: 'details', params: { id: '001' }, query: { from: 'list' }})

页面url格式：

http://XX/XX/details/001?from=list