vue--day81---路由的query参数

1. router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router"
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
// 创建并且暴露一个路由器
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News,

},

{
 
path:'message',
component:Message,
children:[
{
path:'detail',
component:Detail,
}
 

]

},
 
]
},

]
})
 
2. pages/Home.vue
<template>
 

<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<div>
<h2>Home组件内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item " active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link class="list-group-item " active-class="active" to="/home/message">Message</router-link>
</li>
</ul>
 
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
 
 
</template>

<script>
export default {
name:'Home',
beforeDestroy(){
console.log("home组件即将被销毁了");
},
mounted(){
console.log("home组件挂载完毕了",this);
window.homeRoute=this.$route;
window.homeRouter=this.$router;
}
}
</script>

<style>

</style>
3. pages/About.vue
<template>
 

<h2>我是About的内容</h2>
 
 
</template>

<script>
export default {
name:'About',
beforeDestroy(){
console.log("about组件即将被销毁了");
},
mounted(){
console.log("about组件挂载完毕了",this);
window.aboutRoute=this.$route;
window.aboutRouter=this.$router;
}
}
</script>

<style>

</style>
4. pages/News.vue
<template>
<ul>
<li>news001</li>
<li>news002</li>
<li>news003</li>
</ul>
</template>

<script>
export default {
name:'News'

}
</script>

<style>

</style>
5. pages/Messages
<template>
<div>
<ul v-for="m in messageList" :key="m.id">
<li>
<!--跳转 路由 并且携带query 参数 to 的字符串写法-->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link>&nbsp;&nbsp; -->
 
<!--跳转 路由 并且携带query 参数 to 的对象写法-->
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{{ m.title }}
</router-link>&nbsp;&nbsp;
</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>

<style>

</style>
 
7. pages/Detail.vue
<template>
<ul>
<li>消息id:{{ $route.query.id }}</li>
<li>消息标题:{{ $route.query.title }}</li>

</ul>
</template>

<script>
export default {
name:'Detail',
mounted(){
console.log(this.$route)
}
}
</script>

<style>

</style>
 
8. 

 4.路由的query参数

 

1. 传递参数

 

   ```vue

   <!-- 跳转并携带query参数,to的字符串写法 -->

   <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>

   

   <!-- 跳转并携带query参数,to的对象写法 -->

   <router-link 

   :to="{

   path:'/home/message/detail',

   query:{

      id:666,

               title:'你好'

   }

   }"

   >跳转</router-link>

   ```

 

2. 接收参数:

 

   ```js

   $route.query.id

   $route.query.title

posted @ 2023-09-11 22:56  雪落无痕1  阅读(7)  评论(0编辑  收藏  举报