Vue基础23之路由第二节

于 2023-03-16 11:56:41 发布
阅读量671 收藏
点赞数
分类专栏： 前端 Vue基础 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/129581447
版权
本文介绍了在Vue中如何使用路由的query参数和params参数进行数据传递。通过示例代码展示了在`router/index.js`中配置路由，以及在`Detail.vue`和`HomeMessage.vue`组件中如何接收和传递这些参数。同时，还提到了命名路由的概念，简化了路由跳转的方式。
摘要由CSDN通过智能技术生成

Vue基础23

路由

路由的query参数

在这里插入图片描述

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import HomeNews from "@/pages/HomeNews";
import HomeMessage from "@/pages/HomeMessage";
import Detail from "@/pages/Detail";

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:HomeNews
                },
                {
                    path:'message',
                    component:HomeMessage,
                    children:[
                        {
                            path:'detail',
                            component:Detail
                        }
                    ]
                }
            ]
        }
    ]
})

Detail.vue

<template>
  <div>
    <div>消息编号：{{ $route.query.id }}</div>
    <div>消息标题：{{$route.query.title}}</div>
  </div>
</template>

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

<style scoped>

</style>

HomeMessage.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
      <!--      跳转路由并携带query参数，to的字符串的写法-->
	 <!--        <router-link  :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>-->

        <!--      跳转路由并携带query参数，to的对象的写法-->
        <router-link  :to="{
          path:'/home/message/detail',
          query:{
            id:m.id,
            title:m.title
          }
        }">
          {{m.title}}
        </router-link>
        <br>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name: "HomeMessage",
      data(){
          return{
            messageList:[
              {id:"001",title:"消息001"},
              {id:"002",title:"消息002"},
              {id:"003",title:"消息003"},
            ]
          }
      }
    }
</script>

<style scoped>
.active{
  color: black;
}
</style>

请添加图片描述

路由的query参数

  1. 传递参数
<!--      跳转路由并携带query参数，to的字符串的写法-->
<router-link  :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>
<!--      跳转路由并携带query参数，to的对象的写法-->
<router-link  :to="{
	  path:'/home/message/detail',
	  query:{
	    id:m.id,
	    title:m.title
	  }
	}">
    {{m.title}}
  </router-link>
  1. 接收参数
$route.query.id
$route.query.title

命名路由

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import HomeNews from "@/pages/HomeNews";
import HomeMessage from "@/pages/HomeMessage";
import Detail from "@/pages/Detail";

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:HomeNews
                },
                {
                    path:'message',
                    component:HomeMessage,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail
                        }
                    ]
                }
            ]
        }
    ]
})

HomeMessage.vue

<template>
  <div>
    <ul>
<!--      跳转路由并携带query参数，to的字符串的写法-->
      <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>-->

        <!--      跳转路由并携带query参数，to的对象的写法-->
<!--        <router-link  :to="{
          path:'/home/message/detail',
          query:{
            id:m.id,
            title:m.title
          }
        }">-->
        <!--      跳转路由使用名字跳转，并携带query参数，to的对象的写法-->
          <router-link  :to="{
          name:'xiangqing',
          query:{
            id:m.id,
            title:m.title
          }
        }">
          {{m.title}}
        </router-link>
        <br>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name: "HomeMessage",
      data(){
          return{
            messageList:[
              {id:"001",title:"消息001"},
              {id:"002",title:"消息002"},
              {id:"003",title:"消息003"},
            ]
          }
      }
    }
</script>

<style scoped>
.active{
  color: black;
}
</style>

App.vue

<template>
  <div class="bg">
    <Banner></Banner>
    <div class="main-item">
      <div class="left-banner">
        <!--      Vue中借助router-link标签实现路由的切换-->
<!--        <router-link class="link" active-class="active" to="/about">About</router-link>-->
        <!--      Vue中使用name帮助跳转-->
        <router-link class="link" active-class="active" :to="{name:'guanyu'}">About</router-link>
        <router-link class="link" active-class="active" to="/home">Home</router-link>
      </div>
      <div class="right-content">
        <!--      指定组件的呈现位置-->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "@/components/Banner";
export default {
  name: "App",
  components: {Banner},
  data(){
    return{
      isBg:true
    }
  }
}
</script>

<style scoped lang="less">
 .bg{
   margin: 50px 200px;
   .main-item{
     display: flex;
   }
   .left-banner{
     height: 100px;
     width: 100px;
     display: flex;
     flex-direction: column;
     .link{
       text-decoration: none;
       color: black;
       cursor: pointer;
       border-top: 1px solid #ccc;
       border-left: 1px solid #ccc;
       border-right: 1px solid #ccc;
       flex: 1;
       text-align: center;
       justify-content: center;
       line-height: 50px;
       &:first-child{
         border-radius: 4px 4px 0 0;
       }
       &:last-child{
         border-bottom: 1px solid #ccc;
         border-radius:  0 0 4px 4px;
       }
       /*&:focus{
         background-color: #286090;
         color: #fff;
       }*/

     }
     .active{
       background-color: #337ab7;
       color: #fff;
     }
   }
   .right-content{
     margin-left: 100px;
   }
 }

</style>

总结

  1. 作用：可以简化路由的跳转
  2. 如何使用
    （1）给路由命名：
routes:[
        {
            path:'/demo',
            component:Demo,
            children:[
                {
                    path:'test',
                    component:Test,
                    children:[
                        {
                            name:'hello', //给路由命名
                            path:'welcome',
                            component:Hello
                        }
                    ]
                }
            ]
        }
    ]

（2）简化跳转

<!--简化前，需要写完整的路径-->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转-->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数-->
<router-link 
      :to="{
      name:'hello',
      query:{
		id:666,
		title:'你好'
		}
      }"
>跳转</router-link>

路由的params参数

在这里插入图片描述

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import HomeNews from "@/pages/HomeNews";
import HomeMessage from "@/pages/HomeMessage";
import Detail from "@/pages/Detail";

//创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:HomeNews
                },
                {
                    path:'message',
                    component:HomeMessage,
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail/:id/:title',  //nodejs的占位符，后面会填充内容
                            component:Detail
                        }
                    ]
                }
            ]
        }
    ]
})

HomeMessage.vue

<template>
  <div>
    <ul>
<!--      跳转路由并携带params参数，to的字符串的写法-->
      <li v-for="m in messageList" :key="m.id">
<!--        <router-link  :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>-->

        <!--      跳转路由并携带params参数，只能使用名字跳转，to的对象的写法-->
          <router-link  :to="{
          name:'xiangqing',
          params:{
            id:m.id,
            title:m.title
          }
        }">
          {{m.title}}
        </router-link>
        <br>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
    export default {
        name: "HomeMessage",
      data(){
          return{
            messageList:[
              {id:"001",title:"消息001"},
              {id:"002",title:"消息002"},
              {id:"003",title:"消息003"},
            ]
          }
      }
    }
</script>

<style scoped>
.active{
  color: black;
}
</style>

Detail.vue

<template>
  <div>
    <div>消息编号：{{ $route.params.id }}</div>
    <div>消息标题：{{$route.params.title}}</div>
  </div>
</template>

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

<style scoped>

</style>

请添加图片描述

总结

  1. 配置路由，声明接收params参数
{
    path:'/home',
    component:Home,
    children:[
        {
            path:'news',
            component:HomeNews
        },
        {
            path:'message',
            component:HomeMessage,
            children:[
                {
                    name:'xiangqing',
                    path:'detail/:id/:title',  //nodejs的占位符，后面会填充内容(使用占位符声明接收params参数)
                    component:Detail
                }
            ]
        }
    ]
}
  1. 传递参数
<!--  跳转路由并携带params参数，to的字符串的写法-->
<router-link  :to="/home/message/detail/666/你好">跳转</router-link>

<!--      跳转路由并携带params参数，只能使用名字跳转，to的对象的写法-->
 <router-link  
 		:to="{
			 name:'xiangqing',
			 params:{
			   id:666,
			   title:'你好'
			 }
}">跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必使用name配置！

  1. 接收参数
$route.params.id
$route.params.title
VillanelleS
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值