vue 导航跳转案例

vue 导航跳转案例

创建vue项目的配置：

选择3.0x版本

目录结构：

index.js:

import { createRouter, createWebHistory } from 'vue-router'

const Home=()=>import('../views/home')
const Cart=()=>import('../views/cart')
const Category=()=>import('../views/category')
const Profile=()=>import('../views/profile')

const routes = [
  {
    path:'',
    redirect:Home
  },
  {
    path:'/home',
    component:Home
  },
    {
    path:'/cart',
    component:Cart
  },
    {
    path:'/category',
    component:Category
  },
    {
    path:'/profile',
    component:Profile
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

App.vue:

<template>
 <div>
    <Tabbar></Tabbar>
     <router-view></router-view>
 </div>
</template>

<script>
    import Tabbar from "./components/Tabbar/Tabbar";
    export default {
        name:'App',
        components:{
            Tabbar
        }
    }
</script>
<style>
</style>

Tabbar.vue:

<template>
    <div id="tabbar">
        <TabBarItem path="/home" active-color="red">
            <template v-slot:slot-img>
                <img src="../../assets/img/2.png" alt="">
            </template>
            <template v-slot:slot-active-img>
                <img src="../../assets/img/1.png" alt="">
            </template>
            <template v-slot:slot-text>
                 <div>首页</div>
            </template>
        </TabBarItem>
        <TabBarItem path="/category" active-color="red">
            <template v-slot:slot-img>
                <img src="../../assets/img/2.png" alt="">
            </template>
            <template v-slot:slot-active-img>
                <img src="../../assets/img/1.png" alt="">
            </template>
            <template v-slot:slot-text>
                 <div>分类</div>
            </template>
        </TabBarItem>
        <TabBarItem path="/cart">
            <template v-slot:slot-img>
                <img src="../../assets/img/2.png" alt="">
            </template>
            <template v-slot:slot-active-img>
                <img src="../../assets/img/1.png" alt="">
            </template>
            <template v-slot:slot-text>
                 <div>购物车</div>
            </template>
        </TabBarItem>
        <TabBarItem path="/profile">
            <template v-slot:slot-img>
                <img src="../../assets/img/2.png" alt="">
            </template>
            <template v-slot:slot-active-img>
                <img src="../../assets/img/1.png" alt="">
            </template>
            <template v-slot:slot-text>
                 <div>我的</div>
            </template>
        </TabBarItem>
   </div>
</template>

<script>
    import TabBarItem from "./Tab-bar-item"
    export default {
        name: "Tabbar",
        components:{
            TabBarItem
        }
    }
</script>

<style scoped>

    #tabbar{
        width: 100%;
        position: fixed;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        background-color: #f6f6f6;
        box-shadow: 0 -1px 1px rgba(100,100,100,.1);
    }
    .tab-bar-item img{
        width: 24px;
        height: 24px;
    }
</style>

Tab-bar-item.vue:

<template>
    <div class="tab-bar-item" @click="itemClick">
        <slot v-if="!isActived" name="slot-img"></slot>
        <slot v-else name="slot-active-img"></slot>

        <!--方法一：子组件中直接设置颜色-->
<!--        <div :class="{active:isActived}">-->
<!--            <slot name="slot-text"></slot>-->
<!--        </div>-->
        <!--方法二：在父组件App中修改设置颜色        -->
        <div :style="activeStyle">
            <slot name="slot-text"></slot>
        </div>

    </div>
</template>

<script>
    export default {
        name: "tab-bar-item",
        computed:{
            isActived(){
                return this.$route.path==this.path
            },
            activeStyle(){
                return this.isActived?{color:this.activeColor}:{}
            }
        },
        props:{
            path:String,
            activeColor:{
                type:String,
                default:'deepSkyblue'
            }
        },
        methods:{
            itemClick(){
                console.log(this.$route)
                console.log(this.path)
                this.$router.push(this.path)
            }
        }
    }
</script>

<style scoped>
    @import "../../assets/css/base.css";
    .tab-bar-item{
        text-align: center;
        height: 49px;   /*移动端底部导航的固定像素，一般都是49px*/
    }
    /*.active{*/
    /*    color: dodgerblue;*/
    /*}*/

</style>

views底下的文件夹所有的index.vue都一样（测试）
views–>index.vue:

<template>
    <div>
        <h2>我是Cart</h2>
    </div>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style scoped>

</style>