一.简述
在实现页面跳转时，需要携带参数。在这里使用的是vue 中的路由Vue Router,使用前先安装依赖配置项目环境，具体操作参考windos环境安装Vue及配置环境
二. $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;
三.route.params和$route.query的区别
- $route.params
类型: Object
一个 key/value 对象，包含了动态片段和全匹配片段，
如果没有路由参数，就是一个空对象。
- $route.query
类型: Object
一个 key/value 对象，表示 URL 查询参数。
例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
四.params和query的使用
1.$route.params的使用
使用
params传参只能使用name进行引入
router/index.js路由的配置文件中需要写name,否则获取不到信息会提示undefined
{
path: '/second/:id/:name',
name: 'second',
component: () => import('@/view/second')
}
传参组件：test1.vue
<template>
<el-button @click="lookRourt">查看测试</el-button>
</template>
<script>
export default {
data() {
return { }
},
methods: {
lookRourt() {
//params传参 使用name
this.$router.push({
name:'second',
params: {
id:'456578',
name: 'qwerty'
}
})
}
}
}
</script>
接收参数组件：second.vue
<script>
export default {
data() {
return {
queryName :'',
queryId :''
}
},
mounted: function() {
//params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;
},
methods: {
},
}
</script>
2.$route.query的使用
传参组件：test2.vue
<template>
<el-button @click="lookRourt">查看测试</el-button>
</template>
<script>
export default {
data() {
return { }
},
methods: {
lookRourt() {
//query传参，使用name跳转
this.$router.push({
name:'second',
query: {
queryId:'2121656',
queryName: 'wewew'
}
})
//query传参，使用path跳转
this.$router.push({
path:'second',
query: {
queryId:'454645',
queryName: 'qqweqwery'
}
})
}
}
}
</script>
接收参数组件：second.vue
<script>
export default {
data() {
return {
queryName :'',
queryId :''
}
},
mounted: function() {
//query传参接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;
},
methods: {
},
}
</script>
不管是
path引入还是name引入效果都一样
注
1.
params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系
2.params一旦设置在路由，params就是路由的一部分，
如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容
3.路由后面没有/:id/:name，地址栏没有参数
4.query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，
而params相当于post请求，参数不会再地址栏中显示
