vue-router實現SPA購物APP基本功能

時間  2020-05-22
標籤 vue router 實現 spa 購物 app 基本 功能 简体版
原文   原文鏈接

概述

vue-router是vue中的一個核心插件，用它來實現SPA購物APP基本功能

詳細

代碼下載：http://www.demodashi.com/demo/10725.html

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

1、安裝

 

1.若是安裝腳手架，那麼能夠npm install vue-router 便可安裝css

而後導入而且引用就能夠了。html

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

2.也可下載vue-router.js ，而後直接script引用也能夠。vue

2、使用

用 Vue.js + vue-router 建立單頁應用，是很是簡單的。使用 Vue.js ，咱們已經能夠經過組合組件來組成應用程序，當你要把 vue-router 添加進來，咱們須要作的是，將組件(components)映射到路由(routes)，而後告訴 vue-router 在哪裏渲染它們。ajax

2.1關於渲染標籤vue-router

vue-router提供了兩個指令標籤組件來處理導航和自動渲染的邏輯vue-cli

<router-view> 渲染路徑匹配到的視圖組件，還能夠內嵌本身的<router-view> ，根據嵌套路徑渲染嵌套組件npm

<router-link> 路由中的應用導航api

2.2關於跳轉app

使用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.看過度割線上的內容

3、案例效果

要點

1.一級路由跳轉及傳參

2.子路由的配置和跳轉

3.基本組件的使用和傳參

麻雀雖小，可是涵蓋不少知識點，基本等價於一個小的app的功能

4、案例詳解

3.1 構建頁面組件

創建4個主頁面組件以及1個詳情頁組件

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的四個組件

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便可。

5、文件截圖

blob.png

6、其餘補充

這樣咱們一個小案例就能夠正常運行了。

這篇文章真心耗時，噗，單身妹子該出去浪纔對，傷不起~啦啦啦

文章不定時更新~

喜歡就收藏，真愛就打賞~筆芯~

 

代碼下載：http://www.demodashi.com/demo/10725.html

注：本文著做權歸做者，由demo大師發表，拒絕轉載，轉載須要做者受權

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程