编程式导航

最新推荐文章于 2025-10-13 15:07:05 发布

原创最新推荐文章于 2025-10-13 15:07:05 发布 · 334 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

vue实战专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在Vue应用中实现主页面的轮播图和二级导航，以及子页面的列表展示和点击事件触发路由跳转到详情页的过程。展示了使用axios获取数据和Vue Router进行导航的实践。

主页面

<template>
    <div>
        films页面，主页面
        <div style="height:100px;background:yellow;">轮播图</div>
        <div>二级声明式导航</div>
        <!-- router-view相当于给孩子页面占得位置，通过这个组件，孩子页面触发的时候，孩子页面的内容将会显示出来 -->
        <router-view></router-view>
    </div>
</template>

子页面

<template>
    <div>
        nowPlack列表页  films的子页面，
        <ul>
            <li v-for="(item,id) in List" :key="id" @click="handClickPage()">
                <img :src="item.url" alt="">
                {{item.name}}
                <!-- 列表跳详情，声明式写法，需要传参给to前面加上冒号  但是长列表一般不适用-->
                <!-- <router-link to="/detal">{{item.usename}}</router-link> -->
            </li>
        </ul>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
           List:[] 
        }
    },
    mounted(){
        //https://m.maizuo.com
        axios.get('http://rap2api.taobao.org/app/mock/279550/http/get')
           .then(res=>{
            console.log('rap2数据',res.data.data[0].list)
            this.List = res.data.data[0].list
            console.log('list数据',this.List)
        })
    },
    methods:{
        handClickPage(){
            //编程式导航 1
            // location.href = '#/detal'
            //编程式导航 2    可以避免忘写 #
            this.$router.push('/detal')
        }
    }
}
</script>

记得创建一个详情页
我这里是相当于nowPlack子页面是展示列表的
我给列表每一项li绑定了一个click事件，当点击li的时候，就会触发这个事件
this.$router.push(‘/detal’) 触发这个事件后跳转到了详情页detal