路由传参# query传参
路由传参
<template>
<div>
<ul>
<li v-for="m in messageArr" :key="m.id">
<!--to的字符串写法 若想要传递参数，to前面就要加：且要使用模板字符串写法 -->
<!-- <router-link :to="`/Home/Message/Detail?id=${m.id}&title=${m.title}`" active-class="active">{{ m.title }}</router-link> -->
<!-- to的对象写法 -->
<!-- 可以给路由取名，用name代替path: '/Home/Message/Detail' -->
<router-link
:to="{
name:'detail',
query: { id: m.id, title: m.title },
}"
active-class="active"
>{{ m.title }}</router-link
>
</li>
</ul>
<hr />
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Message",
data() {
return {
messageArr: [
{ id: "001", title: "消息1" },
{ id: "002", title: "消息2" },
{ id: "003", title: "消息3" },
],
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
页面配置
<template>
<div>
<ul>
<!-- 每一个路由里都有一个route，里面的query属性里有着被传过来的参数 -->
<li>消息编号：{{$route.query.id}}</li>
<li>消息标题：{{$route.query.title}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Detail",
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
路由规则（给其命名）
{//二级路由地址前面不能加/
path: 'Message',
component: Message,
children:[
{//三级路由
//给路由取名，可以用来简化路径
name："detail",
path:'Detail',
component:Detail,
}
]
},
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# params传参 （需要占位）
路由传参（也可以使用对象法用name代替路径）
<router-link :to="`/Home/Message/Detail/${m.id}/${m.title}`" active-class="active">{{ m.title }}</router-link>
1
页面配置
<template>
<div>
<ul>
<!-- params属性获取参数 -->
<li>消息编号：{{ $route.params.id }}</li>
<li>消息标题：{{ $route.params.title }}</li>
</ul>
</div>
</template>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
路由规则 注意： 1.params传参path不能和name一起使用 2.站位符后面最好加上一个？号，这样即使没有传递params参数过来也不会导致路径错误
{
name:'detail',
// path:'Detail',
path:'Detail/:id?/:title?',//其中后面两个是占位符，是为了辨别params参数
component:Detail,
}
1
2
3
4
5
6
2
3
4
5
6
# 路由的props配置
路由規則
{
name: 'detail',
// path:'Detail',
path: 'Detail/:id/:title',//其中后面两个是占位符，是为了辨别params参数
component: Detail,
// props的第一种写法，对象形式，该对象中的所有key-value都会以props的形式传给detail组件，用的比较少
// props:{a:1,b:"200"}
// props的第二种写法，布尔值形式，若props为true则会把该路由组件收到的所有params参数都以props方式传给detail组件
// props:true
// props的第三种写法，函数形式，会把该路由组件收到的所有params或query参数都以props方式传给detail组件
props($route) {
return {
id: $route.params.id, title: $route.params.title
}
}
// props({ query: { id, title } }) {//第三种写法的连续解构赋值写法
// return {
// id, title
// }
// }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
页面配置
<template>
<div>
<ul>
<!-- 每一个路由里都有一个route，里面的query属性里有着被传过来的参数 -->
<!-- <li>消息编号：{{$route.query.id}}</li>
<li>消息标题：{{$route.query.title}}</li> -->
<!-- params属性获取参数 -->
<!-- <li>消息编号：{{ $route.params.id }}</li>
<li>消息标题：{{ $route.params.title }}</li> -->
<!-- props形式简写 -->
<li>消息编号：{{id}}</li>
<li>消息标题：{{title}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Detail",
props:['id','title']
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 路由的复杂传参
1.简单类型的数据可以通过params和query来传参 2.复杂类型的可以通过本地存储功能传参（一般是回话储存）
本地储存传参若是对象，需要转成JSON格式