首页 > 其他分享 >vue-router实现SPA购物APP基本功能

vue-router实现SPA购物APP基本功能

时间：2023-06-15 12:33:23浏览次数：42  
标签：vue APP router component path 组件 SPA 路由


概述


vue-router是vue中的一个核心插件，用它来实现SPA购物APP基本功能


详细



vue-router是vue中的一个核心插件。

一、安装


1.如果安装脚手架，那么可以npm install vue-router 即可安装

然后导入并且引用就可以了。


import VueRouter from 'vue-router'
Vue.use(VueRouter)

2.也可下载vue-router.js ，然后直接script引用也可以。

二、使用

用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

2.1关于渲染标签

vue-router提供了两个指令标签组件来处理导航和自动渲染的逻辑

<router-view> 渲染路径匹配到的视图组件，还可以内嵌自己的<router-view> ，根据嵌套路径渲染嵌套组件

<router-link> 路由中的应用导航

2.2关于跳转

使用router-link组件来进行导航，通过传入“to”属性指定链接

<router-link to="/home">Go to Home</router-link>

但是同样，我们需要在js中配置路由的跳转



//定义好路由组件

//index.js  配置路由跳转
export default new Router({routes})
var routes = [
    {
      path: '/home',
      name: 'Home',
      component: Home
    }
]



2.3 关于传值

页面跳转时经常需要携带参数，所以路由跳转是可以携带参数的



//动态路径传参，以冒号开头
var routes = [
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
]



当然在路由中也需要配置一下



<router-link :to='{name:"Detail",params:{id:x.name}}'>
    ...
</router-link>



2.4 关于参数结接收

一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新Detail的模板，输出当前用户的商品名

<template>
    <div>
        <h1>水果详情页</h1>
        <h1>{{$route.params.id}}</h1>
    </div>    
</template>

2.5 关于渲染

默认情况下，<router-link>会被渲染成a标签输出，而有时候，为了页面的规范和美观，我们可以将其替换成其他标签，比如<router-link to:"/home" tag="div" > 最终，<router-link>就会以div的形式显示在页面上

2.6 嵌套式路由

上文说过，路由之间是可以嵌套的，所以我们可以在路由中进行子路由的嵌套

那么此时，首先，我们需要先配置路由



//此时，我们在market组件下，配置2个子路由
var routes = [
    {
      path: '/market',
      name: 'Market',
      component: Market,
      children: [
        {
          path: '/',
          component: require('../pages/market/price')
        },
        {
          path: 'price',
          component: require('../pages/market/price')
        },
        {
          path: 'rank',
          component: require('../pages/market/rank')
        }
      ]
    }
]
export default new Router({routes})



market组件中

<template>
    <div>
        <ul>
          <router-link to='/market/price' tag="li">天天特价</router-link>
          <router-link to='/market/rank' tag="li">热销榜</router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

其实这样我们对应的子路由就配置好了。

是不是有点懵，做一个系统的例子

1.根据笔者的第一篇文章，安装下vue-cli以及学习基本知识《Vue2.0（一，vue实例）》http://www.jianshu.com/p/d5272bd2db5e

2.根据笔者的第二篇vue文章，学习一下vue的基本指令《Vue2.0（vue基本指令）》http://www.jianshu.com/p/7a8f2ce9ef5e

3.看过分割线上的内容

三、案例效果

要点

1.一级路由跳转及传参

2.子路由的配置和跳转

3.基本组件的使用和传参

麻雀虽小，但是涵盖很多知识点，基本等价于一个小的app的功能

四、案例详解

3.1 构建页面组件

建立4个主页面组件以及1个详情页组件

vue-router实现SPA购物APP基本功能_Vue

3.1.1home.vue

//因为点击home.vue中的任何一个商品都跳转到商品详情页，所以在渲染每一个商品的时候，我们都加上router-link，并且进行跳转的传递参数
<template>
    <div>
        <ul>
            <li v-for='x in list'>
                <router-link :to='{name:"Detail",params:{id:x.name}}'>
                    <div>
                        ![](x.img)
                    </div>
                    <h3>
                        {{x.name}}{{x.price}}
                    </h3>            
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                list:[]
            }
        },
        beforeCreate(){},
        created(){},
        computed:{},
        mounted(){
            this.$http.get('http://www.vrserver.applinzi.com/aixianfeng/apihomehot.php')
            .then(response=>{
                this.list = response.body.data;
            },response=>{

        });
        },
        methods:{},
        components:{}
    }
</script>
<style>
ul>li{
    display:block
}
</style>

3.1.2market.vue

<template>
    <div>
        <ul>
          <router-link to='/market/price' tag="li">天天特价</router-link>
          <router-link to='/market/rank' tag="li">热销榜</router-link>
          <router-link to='/market/milk' tag="li">牛奶面包</router-link>
          <router-link to='/market/fruit' tag="li">优选水果</router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                list:[]
            }
        },
        computed:{},
        mounted(){},
        methods:{},
        components:{}
    }
</script>
<style>
ul,li{
        list-style: none;
    }
*{
        margin: 0;
        padding: 0;
    }
.nav{
    position: fixed;
    height: 100%;
    width:25%;
    background: #dfdfdf;
    list-style: none;
    text-align: center;
    left: 0;
    top: 0;

}
.footer{
    position: fixed;
    height: 40px;
    width:100%;
    background: #dfdfdf;
    list-style: none;
    text-align: center;
    left: 0;
    bottom: 0;
    z-index:10;
}
.nav li{
    /*width: 25%;*/
    padding: 10px;
}
.nav a{
    text-decoration: none;
}
.router-link-active{
    background:skyblue
}
.view{
    position: fixed;
    height: 100%;
    width:75%;
    background: #fff;
    list-style: none;
    text-align: center;
    right: 0;
    top: 0;
    overflow-y:auto
}
</style>

3.1.3car.vue和mine.vue简写

<template>

    <h1>我的</h1>
</template>

<script>
    export default{
        data(){
            return {
            }
        },
        computed:{},
        mounted(){

        },
        methods:{},
        components:{}
    }
</script>
<style lang='css'>

</style>

3.2组件引用和路由配置

安装好路由，并且进行组件的引入和路由的配置



import Vue from 'vue'import Router from 'vue-router'import VueResource from 'vue-resource'Vue.use(Router)
Vue.use(VueResource)import Home from 'pages/home.vue'import Market from 'pages/market.vue'import Car from 'pages/car.vue'import Mine from 'pages/mine.vue'import Detail from 'pages/detail.vue'var routes = [
    {      path: '/',      name: 'Home',      component: Home
    },
    {      path: '/home',      name: 'Home',      component: Home
    },
    {      path: '/market',      name: 'Market',      component: Market,      children: [
        {          path: '/',          component: require('../pages/market/price')
        },
        {          path: 'price',          component: require('../pages/market/price')
        },
        {          path: 'rank',          component: require('../pages/market/rank')
        },
        {          path: 'milk',          component: require('../pages/market/milk')
        },
        {          path: 'fruit',          component: require('../pages/market/fruit')
        },
      ]
    },
    {      path: '/car',      name: 'Car',      component: Car
    },
    {      path: '/mine',      name: 'Mine',      component: Mine
    },
    {      path: '/detail/:id',      name: 'Detail',      component: Detail
    }
]export default new Router({routes})




3.3detail.vue

点击home页中的每一个商品都需要跳转到商品详情页，所以我们要进行参数的接收和页面渲染

<template>
    <div>
        <h1>水果详情页</h1>
        <h1>{{$route.params.id}}</h1>
    </div>    
</template>

<script>
    export default{
        data(){},
        computed:{},
        mounted(){

        },
        methods:{},
        components:{}
    }
</script>
<style lang='css'>
</style>

3.4market.vue

在market组件中，我们引用二级路由，所以需要定义router-link和router-view，因为每一个二级路由需要渲染不同的部分，比如天天特价，热销榜等等，所以我们还需要这四个组件，看3.4

<template lang='html'>
    <div>
        <ul>
          <router-link to='/market/price' tag="li">天天特价</router-link>
          <router-link to='/market/rank' tag="li">热销榜</router-link>
          <router-link to='/market/milk' tag="li">牛奶面包</router-link>
          <router-link to='/market/fruit' tag="li">优选水果</router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                list:[]
            }
        },
        computed:{},
        mounted(){},
        methods:{},
        components:{}
    }
</script>
<style lang='css'>
ul,li{
        list-style: none;
    }
*{
        margin: 0;
        padding: 0;
    }
.nav{
    position: fixed;
    height: 100%;
    width:25%;
    background: #dfdfdf;
    list-style: none;
    text-align: center;
    left: 0;
    top: 0;

}
.footer{
    position: fixed;
    height: 40px;
    width:100%;
    background: #dfdfdf;
    list-style: none;
    text-align: center;
    left: 0;
    bottom: 0;
    z-index:10;
}
.nav li{
    /*width: 25%;*/
    padding: 10px;
}
.nav a{
    text-decoration: none;
}
.router-link-active{
    background:skyblue
}
.view{
    position: fixed;
    height: 100%;
    width:75%;
    background: #fff;
    list-style: none;
    text-align: center;
    right: 0;
    top: 0;
    overflow-y:auto
}
</style>

3.5 market的四个组件

vue-router实现SPA购物APP基本功能_vue-router_02

3.5.1 fruit.vue

<template>
    <List type='优选水果'></List>
</template>

<script>
import List from '../../components/List'
    export default{
        data(){
            return {
            }
        },
        computed:{},
        mounted(){

        },
        methods:{},
        components:{
            List
        }
    }
</script>
<style></style>


3.5.2 milk.vue

<template>
    <List type='牛奶面包'></List>
</template>

<script>
import List from '../../components/List'
    export default{
        data(){
            return {
            }
        },
        beforeCteate(){},
        create(){},
        computed:{},
        mounted(){},
        methods:{},
        components:{
            List
        }
    }
</script>
<style></style>

3.5.3price.vue

<template>
    <List type='天天特价'></List>
</template>

<script>
import List from '../../components/List'
    export default{
        data(){
            return {

            }
        },
        beforeCteate(){},
        create(){},
        computed:{},
        mounted(){},
        methods:{},
        components:{
            List
        }
    }
</script>
<style></style>

3.5.4rank.vue

<template>
    <List type='热销榜'></List>
</template>

<script>
import List from '../../components/List'
    export default{
        data(){
            return {
            }
        },
        beforeCteate(){},
        create(){},
        computed:{},
        mounted(){},
        methods:{},
        components:{
            List
        }
    }
</script>
<style></style>

仔细看着四个小组件，是不是都是同样引用了一个List.vue的组件，以为如果这四个页面的结构是一样的，所以我们只需要引用要给共同的组件即可

3.5.5 List.vue

<template>
<div class="mod-home">
        <ul>
            <li v-for='x in list'>
                <div class="">
                    ![](x.img)
                </div>
                <h3>
                    {{x.name}}{{x.price}}
                </h3>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  data () {
    return {
      list:[]
    }
  },
  props:['type'],
  computed:{},
  mounted(){
       var type = this.type || '天天特价';
 this.$http.get('http://www.vrserver.applinzi.com/aixianfeng/apicategory.php?category='+type)
       .then(response=>{
           this.list = response.body.data
       },response =>{

       })
  },
  methods:{}

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h1, h2 {
      font-weight: normal;
    }

    ul {
      list-style-type: none;
      padding: 0;
    }

    li {
      display: block;
      margin: 0 10px;
    }

    a {
      color: #42b983;
    }
</style>

这里我们在不同的父组件传入一个type，在子组件List中，我们接收type，并且根据type不同，请求不同的ajax即可。

五、文件截图

vue-router实现SPA购物APP基本功能_List_03

六、其他补充

这样我们一个小案例就可以正常运行了。

这篇文章真心耗时，噗，单身妹子该出去浪才对，伤不起~啦啦啦

文章不定时更新~


标签：vue,APP,router,component,path,组件,SPA,路由
From： https://blog.51cto.com/u_7583030/6486227

相关文章

  • 从 SpringApplication 认识 Spring 应用启动过程
    一、SpringApplication是什么？Spring应用的启动类。二、SpringApplication执行了什么？创建ApplicationContext实例ApplicationContext就是我们所说的容器实例。注册CommandLinePropertySourceCommandLinePropertySource的作用是将命令行参数输出为Spring属性。......
  • [-002-]-Python3+Unittest+Uiautomation Windows桌面App UI自动化之鼠标操作
    1、单击鼠标左键Click(x:int,y:int,waitTime:float=OPERATION_WAIT_TIME)模拟鼠标在点x,y的点击。OPERATION_WAIT_TIME默认为0.5即等待时间默认为0.5秒2、单击鼠标中键MiddleClick(x:int,y:int,waitTime:float=OPERATION_WAIT_TIME)模拟鼠标在点x,y......
  • vue图片懒加载vue-lazyload
    1.安装vue-lazyloadnpmivue-lazyload2.在main.js中引入使用import{createApp}from'vue'import'./style.css'importAppfrom'./App.vue'importVueLazyloadfrom'vue-lazyload'//引入importImgFailfrom"@/assets/......
  • 基于AutoJs7实现的薅羊毛App专业版源码大分享
    源码下载链接：https://pan.baidu.com/s/1QvalXeUBE3dADfpVwzF_xg?pwd=0736提取码：0736 专业版肯定比个人版功能强大并且要稳定。增加了很多功能的同时也测试封号的App，对于封号的App，给予剔除。虽然App数量减少了但是都是稳定的且收益比较高的。并且一天也就刷那么十几个而已。 专业版......
  • uniapp 打包发布小程序的流程指引
    用uniapp开发小程序其实和开发H5是一样的。就是在打包的时候会略有不同。uniapp在开发的时候需要在 manifest.json的源码视图配置nginx反向代理才能去请求后端`/代理名称${config.url}`一般情况下的请求都是代理+url去请求数据。但是，这个只是针对H5的请求方式......
  • 基于Spark的大规模日志分析
    摘要：本篇文章将从一个实际项目出发，分享如何使用Spark进行大规模日志分析，并通过代码演示加深读者的理解。本文分享自华为云社区《【实战经验分享】基于Spark的大规模日志分析【上进小菜猪大数据系列】》，作者：上进小菜猪。随着互联网的普及和应用范围的扩大，越来越多的应用场景需要对......
  • java服务器更换jdk版本后报错：javax.net.ssl.SSLHandshakeException: No appropriate p
    java，服务器更换jdk版本后报错：Causedby:javax.net.ssl.SSLHandshakeException:Noappropriateprotocol(protocolisdisabledorciphersuitesareinappropriate)然后数据库出现：###Errorqueryingdatabase.Cause:java.lang.reflect.UndeclaredThrowableExc......
  • MyBatis-Plus的BaseMapper与IService
    mybatis-plus提供两种包含预定义增删改查操作的接口：com.baomidou.mybatisplus.core.mapper.BaseMappercom.baomidou.mybatisplus.extension.service.IService刚开始有点疑惑为什么要设计俩个接口用来增删改查BaseMapper和IService的方法有很多类似的功能，但是方法名不同对比......
  • uniapp上拉加载下拉刷新
    <template> <viewclass="content"> <scroll-viewscroll-with-animationrefresher-default-style="none":refresher-enabled="true" :refresher-triggered="triggered"refresher-background="#fff&quo......
  • 前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件waterfall
    前端vue仿京东天猫简单好用的瀑布流瀑布流式布局列表组件waterfall，下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13046效果图如下：使用方法<!--proList:条目数组数据goProDetail:条目点击事件跳转（实现了点击条目数据传值）--><ccWaterLis......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99