vue-router传递参数方式详解
fivemin 8/23/2022 VueJS
在开发项目中遇到需要携带参数跳转页面的需求，来记个笔记
# 方法1.(params传值)
// 以下是主页面跳转方法
toEditInfo() {
this.$router.push({
path: '/XXX/XXX',
params:{
edit:true
}
});
}
// 以下是目标页面方法
created(){
this.editStatus = this.$route.query.params;
console.log('editStatus',this.editStatus )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
提示：该方法传递的值不会在地址栏中显示，但刷新页面数据会消失
# 方法2.(query传值)
//以下是主页面跳转方法
toEditInfo() {
this.$router.push({
path: '/XXX/XXX',
query:{
edit:true
}
});
}
//以下是目标页面方法
created(){
this.editStatus = this.$route.query.edit;
console.log('editStatus ',this.editStatus )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
提示：该方法传递的值会在地址栏中显示，刷新页面数据不会消失
# 方法3.(动态路由拼接)
// 以下是主页面跳转方法
toEditInfo() {
this.$router.push({
path: '/XXX/XXX/true'
});
}
// 以下是目标页面方法
created(){
this.editStatus = this.$route.params.edit;
console.log('editStatus ',this.editStatus )
}
// 这种方法需要修改路由
routes: [
{
path: '/XXX/XXX/:edit',
name: 'auth',
component:Auth
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
提示：该方法传递的值会在地址栏中显示，刷新页面数据不会消失 重点重点重点： 在获取数据时是route不是router！！！！！