Message.vue
<template>
<div>
<ul>
<li v-for="m in megList" :key="m.id">
<router-link to="/home/message/detil?id=666&name=你好">{{m.name}}</router-link>
</li>
<hr />
<router-view></router-view>
</ul>
</div>
</template>
<script>
import { nanoid } from 'nanoid'
export default {
name:'Message',
components:{},
data(){
return{
newMeg:['消息1','消息2','消息3'],
megList:[
{
id:nanoid(),
name: '消息1'
},
{
id:nanoid(),
name: '消息2'
},
{
id:nanoid(),
name: '消息3'
},
]
}
}
}
</script>
<style scoped>
</style>
一般写的时候有消息的时候只写一个路由组件
点击消息1的时候,能不能把消息1的id,还有消息1的name传递过来,整个步骤不会出现<组件名 />
创建Detil.vue
<template>
<div>
<ul>
<li>消息编号:???</li>
<li>消息的名字:???</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Detil',
components:{},
}
</script>
<style scoped>
</style>
考虑到你要路由在哪
router > index.js
.....
{
path:'message',
component:Messgae,
children:[
{
path:"detil",
component: Detil,
}
]
}
接下来要做的就是点击消息1
出现消息1的信息
;点击消息2
出现消息2的信息
…(把不同的数据带过去)
路由能接收俩个参数:
-
1.query参数(跟ajax里的query参数几乎是一样的)
-
通过
?
的形式传递参数 -
假如传过去的参数是:
<router-link to="/home/message/detil?id=666&name=你好">{{m.name}}</router-link>
-
Detil.vue
里面有一个参数就比较重要了mounted(){ console.log(this.$route)//$route:能够得到这个路由配置的相关信息 }
控制台输出:
{name: undefined, meta: {…}, path: '/home/message/detil', hash: '', query: {…}, …} fullPath: "/home/message/detil?id=666&name=%E4%BD%A0%E5%A5%BD" hash: "" matched: (3) [{…}, {…}, {…}] meta: {} name: undefined params: {} path: "/home/message/detil" query: {id: '666', name: '你好'} [[Prototype]]: Object
我们就知道怎么写了:
<template> <div> <ul> <li>消息编号:{{$route.query.id}}</li> <li>消息的名字:{{$route.query.name}}</li> </ul> </div> </template>
那怎么修改?
如果这么改:
<router-link :to="/home/message/detil?id=m.id&name=m.name">{{m.name}}</router-link>
这样路径和数值都是js表达式
那就可以试着写模板字符串:
<!-- 跳转路由并携带query参数,to的字符串写法 --> <router-link :to="`/home/message/detil?id=${m.id}&name=${m.name}`">{{m.name}}</router-link>
还有一种写法:
<!-- 跳转路由并携带query参数,to的对象写法 --> <router-link :to="{ //to对象里面能写俩个属性 //1.path path: '/home/message/detil', //2.query query:{ id: m.id, name: m.name } }"> {{m.name}} </router-link>
需要并且繁琐的时候可以写成对象的形式
-
总结
路由的query参数
1.传递参数
<!-- 跳转路由并携带query参数,to的字符串写法 -->
<router-link :to="`/home/message/detil?id=${m.id}&name=${m.name}`">{{m.name}}</router-link>
<!-- 跳转路由并携带query参数,to的对象写法 -->
<router-link :to="{
//to对象里面能写俩个属性
//1.path
path: '/home/message/detil',
//2.query
query:{
id: m.id,
name: m.name
}
}">
{{m.name}}
</router-link>
2.接收参数
$route.query.id
$route.query.name