路由传参数我们有两种方法 分别是query和params
我们先来介绍第一种
query
① to的字符串写法
//跳转路由并携带query参数，to的字符串写法
<router-link :to="`路径?key=${value}&key=${value}`"> </router-link>例如：
在组件页面
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{
{m.title}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name:'Message',
data() {
return {
messageList:[
{id:'001',title:'消息001'},
{id:'002',title:'消息002'},
{id:'003',title:'消息003'}
]
}
},
}
</script>
在index.js页面不需要配置相关配置，只需要做好基本的路由和子路由的嵌套
② to的对象写法 （使用的较多）
<template>
<div>
<ul>
<router-link :to="{
path:'路径'，
query:{
key:value,
key:value
}
}"
>
</router-link>
<ul>
<div>
<template>例如：
<template>
<div>
<ul>
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{
{m.title}}
</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'Message',
data() {
return {
messageList:[
{id:'001',title:'消息001'},
{id:'002',title:'消息002'},
{id:'003',title:'消息003'}
]
}
},
}
</script>params
①to字符串的写法
//1.跳转并携带params参数，to字符串的写法
<router-link :to="`/路径/${数组名.key}/${数组名.key}`">{
{数组名.key}}</router-link>例如:
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{
{m.title}}
</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'Message',
data() {
return {
messageList:[
{id:'001',title:'消息001'},
{id:'002',title:'消息002'},
{id:'003',title:'消息003'}
]
}
},
}
</script>②to对象的写法
//跳转并携带params参数，to的对象写法
<router-link
:to="{
params:{
key:value,
key:value
}
>
<router-link>例如：
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{
name:'xiangqing',
params:{
id:m.id,
title:m.title
}
}">
{
{m.title}}
</router-link>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'Message',
data() {
return {
messageList:[
{id:'001',title:'消息001'},
{id:'002',title:'消息002'},
{id:'003',title:'消息003'}
]
}
},
}
</script>在index页面声明params参数
{
path:'路由参数/:key1/:key2' //我们这里使用占位符声明接受params参数
}例如：
{
name:'xiangqing',
path:'detail/:id/:title',
component:Detail,//组件名
}在组件页中使用：
{ {$route.params.key}}
{ {$route.params.key}}
一定要在$route中调用
这仅仅是Vue小白的学习过程