vue路由列表跳转及购物车

进阶的宫女

于 2022-10-09 17:52:45 发布

阅读量520

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_61185298/article/details/127230247

版权

本文探讨了在Vue.js应用程序中如何实现页面间的路由跳转，特别是在从列表页到购物车页的过程中，同时涵盖了前端开发中的关键概念和技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

APP页

<template>
  <div id="box">
    <div>
      <router-view></router-view>
    </div>
    <div id="zhanweizhi"></div>
    <ul id="uu">
      <li>
        <router-link to="/list">list</router-link>
      </li>
      <li>
        <router-link to="/car">car</router-link>
      </li>
      
    </ul>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
     done:true
    }
  },
  components:{
    
  },
  
}
</script>

列表页

<template>
    <div id="box">
        <div class="device" id="page-list">
            <header><span class="header-title">商品列表</span></header>
            <div class="page">
                <div class="tab-wrap">
                    <ul class="cate-tab">
                        <li class="cate" v-for="(item,index) in catelist" @click="showdata(item.id)" :class="index==showid?'c':''">{
  {item.msg}}</li>
                    </ul>
                </div>
            </div>


            <div id="zh">
                <ul id="zh_li">
                    <li :class="sortid==0?'c':''" @click="zh(0)">综合排序</li>
                    <li :c