router路由跳转传参vue3.0顶部搜索栏跳转指定搜索界面数据传递展示

2022-11-29 约 1501 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=128094030

（router路由跳转传参）vue3.0顶部搜索栏跳转指定搜索界面数据传递展示

前言：（router路由跳转传参）vue3.0顶部搜索栏跳转指定搜索界面数据传递展示
主要是做一个购物类的商城，搜索框是在顶部头部导航栏而数据要跳转新的界面根据搜索框内容实时模糊查询显示数据。
以下是本人做项目一点点记录，大佬有问题的可以一起讨论

文章目

前言

主要实现效果如下：

顶部搜索框：当输入数据点击搜索的时候跳转新界面搜索内容，新界面体现出

新界面效果

提示：以下是本篇文章正文内容，下面案例可供参考

一、环境

项目搭建的时候采用的是vue3，搜索框部分是作为头部的而下面是具体内容展示模块

二、使用步骤

1.AppHeaderNav.vue界面内容如下

主要代码解析：

AppHeaderNav.vue 代码如下（示例）：

<template>
    <div class="myhead main">
<!--        上面区域-->
         <div class="head-top">
             <!--logo-->
             <h1 class="logo">
                 <router-link to="/mainLayout">logo</router-link>
             </h1>
<!--             搜索-->
             <div class="center">
                 <div class="center-seach">
                     <el-input v-model="search" name= "search" placeholder="618" clearable style="width: 440px"/>
                     <el-button type="primary"   @click="searchBtn" >搜索</el-button>
                 </div>

                 <!-- 搜索下面的导航 -->
                 <ul class="center-navs">
                     <li>
                         <a href="#">美食</a>
                     </li>

                     <li>
                         <a href="#">餐厨</a>
                     </li>
                     <li>
                         <a href="#">艺术</a>
                     </li>
                     <li>
                         <a href="#">电器</a>
                     </li>
                     <li>
                         <a href="#">居家</a>
                     </li>
                     <li>
                         <a href="#">洗护</a>
                     </li>
                     <li>
                         <a href="#">孕婴</a>
                     </li>
                     <li>
                         <a href="#">服装</a>
                     </li>
                     <li>
                         <a href="#">杂货</a>
                     </li>
                 </ul>


             </div>
<!--             购物车-->
             <div class="cart">
                 <a href="/mainLayout/carview">
                     <i class="iconfont icon-cart"></i>
                     购物车
                     <em>{{count}}</em>
                 </a>
             </div>
         </div>

        <!-- 二级导航 -->
        <AppHeadTwo />
    </div>

</template>

<script>
    import { useRouter } from 'vue-router'
    import AppHeadTwo from "./AppHeadTwo.vue";
    import { useStore } from "vuex";
    import request from "@/utils/request";
    import { getCarList} from "@/utils";
    export default {
        components: {
            AppHeadTwo
        },

        name: "AppHeaderNav",
        data(){
            return{
                user: {},
                count: "0",
                search:"618",
            }
        },
        created() {
            let userStr =sessionStorage.getItem("user") || '{}';
            this.user = JSON.parse(userStr);
            request.get("/user/getId/"+this.user.id).then(res=>{
                if (res.code==='0'){
                    this.user = res.data;
                }
            });
            this.initLoad();
        },
        methods: {
            initLoad(){
                getCarList(this.user.id).then(res=>{
                    if(res.code === '0'){
                        this.count=res.data.total;
                    }
                }).catch(err => {
                    console.log(err);
                });

            },

            searchBtn(){
                if (this.search){
                    this.$router.push(`/mainLayout/homeSearch/${this.search}`).catch(err => { window.console.log(err)});
                }else {
                    this.$router.push("/");
                }




                // this.$router.push("/mainLayout/homeSearch/"+this.search);
                // if (this.search) {
                //     this.$router.push({
                //         name: "mainLayout/homeSearch",
                //         query: {
                //             // category: this.newsValue,
                //             search: this.search,
                //         }
                //     })
                // }
            }
        }






    }
</script>

<style scoped>
    .main {
        width: 1100px;
        margin: 0 auto;
    }
    .myhead {
        height: 120px;
        padding-top: 25px;
        background-color: #fff;
    }
    .head-top {
        display: flex;
    }
    .logo{
        width: 230px;
        height: 60px;
        width: 330px;
        height: 60px;

    }
    a {
        display: inline-block;
        height: 60px;
        width: 100%;
        /*background: url("../assets/images/logo.webp") no-repeat 0 -298px;*/
    }

    .center{
        flex: 1;
    }
    .center-seach {
        width: 540px;
        height: 35px;
    }

    .center-navs {
        width: 540px;


    }

    li {
        float: left;
        height: 32px;
        padding: 5px;
        list-style: none;

    }
    a {
        padding: 0 5px;
        /*border-right: 1px solid #ccc;*/
        text-decoration: none;
        color: black;
    }
    a:hover {
         color: red;
     }

    li:last-child a {
        border-right: 0;
    }

    .cart{
        box-sizing: border-box;
        width: 150px;
        height: 35px;
        line-height: 32px;
        border-radius: 20px;
        border: 1px solid dodgerblue;
        font-size: 15px;
        text-align: center;
    }

    em {
        font-style: normal;
        position: absolute;
        color: #fff;
        background-color: red;
        border-radius: 50%;
        padding: 5px;
        display: inline-block;
        width: 22px;
        height: 25px;
        line-height: 25px;
        font-size: 10px;
    }


</style>

2.新增跳转结果的HomeSearch.vue界面内容如下

主要代码解析：

<template>
    <div class="home-search main">
        <h3 style="font-size: 32px;
                text-align: center;
                font-weight: normal;
                line-height: 100px;">详情展示</h3>
        <ul class="goods-list">
            <li class="item" v-for="item in goods" :key="item.id">
                <router-link :to="'/mainLayout/category/'+item.id" style="text-decoration: none">
                    <img :src="item.murl" alt="">
                    <div class="title ellipsis">{{item.tname}}</div>
                    <div class="title ellipsis">{{item.content}}</div>
<!--                    <div class="price">￥{{item.scurrentprice}}<del>{{item.soraiginalprice}}</del></div>-->
                </router-link>
            </li>

        </ul>
    </div>
</template>

<script>
    import { getShopSearchList} from '@/utils/index'
    import MyPanel from "@/components/MyPanel"
    import {ref , watch} from 'vue'
    import request from "@/utils/request";
    import {useRoute, useRouter} from "vue-router";


    export default {
        name: "HomeSearch.vue",
        components:{
            MyPanel
        },
        data(){
            return{
                goods:[],
                search : "",

            }
        },
        created() {
            let router = useRouter()
            // 监听当前路由变化
            watch(
                () => router.currentRoute.value,
                () => {
                    this.search=router.currentRoute.value.params.keywords;
                    this.load();
                }
            );
            this.search=router.currentRoute.value.params.keywords;
            this.load();
        },
        methods:{
            load(){
                console.log(this.search,"this.search")
                getShopSearchList(this.search).then(res=>{
                    if(res.code === '0'){
                        this.goods=res.data;
                    }
                }).catch(err => {
                    console.log(err);
                });

            },
        }
    }
</script>

<style lang="less" scoped>
    .main {
        width: 1100px;
        margin: 0 auto;
    }

    .ellipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .goods-list{
        display: flex;
        flex-wrap: wrap;
        /*justify-content: space-between;*/
        margin-bottom: 30px;

        .item{
            list-style: none;
            width: 265px;
            height: 365px;
            background-color: #f5f5f5;
            img{
                width: 265px;
                height: 265px;
            }
            .title{
                font-size: 17px;
                text-align: center;
                padding: 15px 25px;
            }
            .price{
                text-align: center;
                font-size: 15px;
                color: #CF4444;
                del{
                    margin-left: 6px;
                    color: #666;
                }
            }

            transition: all .5s;
            margin: 4px;
            &:hover {
                transform: translate3d(0,-3px,0);
                box-shadow: 0 3px 8px rgba(0,0,0,0.2);
            }
        }

    }



    .category{
        padding: 30px;
        .breadcrumb{
            padding-bottom: 20px;
            padding-left: 10px;
        }


    }

</style>

总结

主要使用watch动态的监听路由，以及router路由跳转传参实现了购物商城网站搜索框查询跨界面的传参查询实现