Vue路由传参的两种方式
在vue中，参数传递共有2种：
http://localhost:8080/demo?cid=c001
http://localhost:8080/demo2/c001
查询参数
- 确定访问路径
<!-- 带查询参数，下面的结果为 /demo?cid=c001 -->
<router-link to="/demo?cid=c001">Demo</router-link> |
<router-link :to="{ path: '/demo', query: { cid: 'c001' }}">demo</router-link>
- 编写路由
{
path: '/demo',
name: 'demo',
component: Demo
},
- 编写页面，并获得参数
<template>
<div>
</div>
</template>
<script>
export default {
mounted() {
// 获得查询参数
console.info( this.$route.query.cid )
},
}
</script>
<style>
</style>
路径参数
- 编写访问路径
<router-link :to="{ name: 'demoName2', params: { uid: 123 }}">Demo2</router-link> |
<router-link to="/demo2/123">Demo2</router-link> |
- 确定访问路径
{
path: '/demo2/:uid',
name: 'demoName2',
component: Demo2
}
- 编写路由
{
path: '/demo2/:uid',
name: 'demoName2',
component: Demo2
}
- 编写页面，并获得参数
<template>
<div>
</div>
</template>
<script>
export default {
mounted() {
// 获得路径参数
console.info( this.$route.params.uid )
},
}
</script>
<style>
</style>
路由总结
- 在任何组件内通过 this.$router 访问路由器
- 在任何组件内通过 this.$route 访问当前路由：
| this.$route相关操作 | 描述 | 实例 | |
| this.$route.params | 获得路径参数 | 模式 | /user/:uid |
| 匹配路径 | /user/123 | ||
| this.$route.params.uid | 123 | ||
| this.$route.query | 获得请求参数 | /user?id=123 | |
