Vue2.0系列（三肴楷、vue-router）附SPA案例

vue-router是vue中的一個核心插件。
今天一起來學一下荠呐，因為筆者也是根據讀書和API來學習和整理阶祭，資歷尚淺绷杜，如有大神，還請指點一二濒募。

03.jpg

一，安裝

1.如果安裝腳手架圾结，那么可以npm install vue-router 即可安裝
然后導入并且引用就可

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

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

二筝野，使用

用 Vue.js + vue-router 創(chuàng)建單頁應用晌姚，是非常簡單的。使用 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 關于傳值

頁面跳轉時經常需要攜帶參數(shù)窿祥，所以路由跳轉是可以攜帶參數(shù)的

//動態(tài)路徑傳參，以冒號開頭
var routes = [
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
]

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

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

2.4 關于參數(shù)結接收

一個『路徑參數(shù)』使用冒號 : 標記蝙寨。當匹配到一個路由時晒衩，參數(shù)值會被設置到 this.$route.params，可以在每個組件內使用墙歪。于是听系，我們可以更新Detail的模板，輸出當前用戶的商品名

<template lang='html'>
    <div>
        <h1>水果詳情頁</h1>
        <h1>{{$route.params.id}}</h1>
    </div>  
</template>

2.5 關于渲染

默認情況下箱亿，<router-link>會被渲染成a標簽輸出跛锌，而有時候，為了頁面的規(guī)范和美觀届惋，我們可以將其替換成其他標簽髓帽，比如<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 lang='html'>
    <div>
        <ul class="nav">
          <router-link to='/market/price' tag="li">天天特價</router-link>
          <router-link to='/market/rank' tag="li">熱銷榜</router-link>
        </ul>
        <router-view class='view'></router-view>
    </div>
</template>

其實這樣我們對應的子路由就配置好了。

2.7命名視圖

有時候想同時 (同級) 展示多個視圖歌粥，而不是嵌套展示塌忽，例如創(chuàng)建一個布局，有 sidebar (側導航) 和 main (主內容) 兩個視圖失驶，這個時候命名視圖就派上用場了土居。你可以在界面中擁有多個單獨命名的視圖，而不是只有一個單獨的出口嬉探。如果 router-view 沒有設置名字擦耀，那么默認為 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一個視圖使用一個組件渲染涩堤，因此對于同個路由眷蜓，多個視圖就需要多個組件。確保正確使用 components 配置 (帶上 s)：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

編程式導航
router.push({ name: 'user', params: { userId: 123 }})
router.replace(location)
跟 router.push 很像胎围，唯一的不同就是吁系，它不會向 history 添加新記錄，而是跟它的方法名一樣 —— 替換掉當前的 history 記錄
router.replace({ name: 'Start'});
router.go(n)
這個方法的參數(shù)是一個整數(shù)痊远，意思是在 history 記錄中向前或者后退多少步垮抗，類似 window.history.go(n)。

// 帶查詢參數(shù)碧聪，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

分割線

是不是有點懵冒版，做一個系統(tǒng)的例子
1.根據筆者的第一篇文章，安裝下vue-cli以及學習基本知識《Vue2.0（一逞姿，vue實例）》http://www.reibang.com/p/d5272bd2db5e
2.根據筆者的第二篇vue文章辞嗡，學習一下vue的基本指令《Vue2.0（vue基本指令）》http://www.reibang.com/p/7a8f2ce9ef5e
3.看過分割線上的內容

案例效果

GIF.gif

要點
1.一級路由跳轉及傳參
2.子路由的配置和跳轉
3.基本組件的使用和傳參
麻雀雖小，但是涵蓋很多知識點滞造，基本等價于一個小的app的功能

三续室，案例詳解

3.1 構建頁面組件
建立4個主頁面組件以及1個詳情頁組件

01.jpg

3.1.1home.vue

//因為點擊home.vue中的任何一個商品都跳轉到商品詳情頁，所以在渲染每一個商品的時候谒养，我們都加上router-link挺狰，并且進行跳轉的傳遞參數(shù)
<template lang='html'>
    <div class="mod-home">
        <ul>
            <li v-for='x in list'>
                <router-link :to='{name:"Detail",params:{id:x.name}}'>
                    <div class="list">
                        ![](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 lang='css'>
ul>li{
    display:block
}
</style>

3.1.2market.vue

<template lang='html'>
    <div>
        <ul class="nav">
          <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">優(yōu)選水果</router-link>
        </ul>
        <router-view class='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.1.3car.vue和mine.vue簡寫

<template lang='html'>
    
    <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頁中的每一個商品都需要跳轉到商品詳情頁买窟，所以我們要進行參數(shù)的接收和頁面渲染

<template lang='html'>
    <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 class="nav">
          <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">優(yōu)選水果</router-link>
        </ul>
        <router-view class='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的四個組件

02.jpg

3.5.1 fruit.vue

<template lang='html'>
    <List type='優(yōu)選水果'></List>
</template>

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

3.5.2 milk.vue

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

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

3.5.3price.vue

<template lang='html'>
    <List type='天天特價'></List>
</template>

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

3.5.4rank.vue

<template lang='html'>
    <List type='熱銷榜'></List>
</template>

<script>
import List from '../../components/List'
    export default{
        data(){
            return {
            }
        },
        beforeCteate(){},
        create(){},
        computed:{},
        mounted(){},
        methods:{},
        components:{
            List
        }
    }
</script>
<style lang='css'></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即可。

這樣我們一個小案例就可以正常運行了曼月。

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

文章不定時更新~

喜歡就點贊，真愛就打賞_筆芯

最后編輯于：2018.08.12 10:08:09

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末捕透，一起剝皮案震驚了整個濱河市聪姿，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌乙嘀，老刑警劉巖末购，帶你破解...
沈念sama閱讀 217,542評論 6贊 504
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異虎谢，居然都是意外死亡盟榴，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,822評論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門婴噩，熙熙樓的掌柜王于貴愁眉苦臉地迎上來擎场，“玉大人，你說我怎么就攤上這事几莽⊙赴欤” “怎么了？”我有些...
開封第一講書人閱讀 163,912評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵章蚣，是天一觀的道長站欺。經常有香客問我，道長纤垂，這世上最難降的妖魔是什么矾策？我笑而不...
開封第一講書人閱讀 58,449評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮洒忧，結果婚禮上蝴韭，老公的妹妹穿的比我還像新娘。我一直安慰自己熙侍，他們只是感情好榄鉴，可當我...
茶點故事閱讀 67,500評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布履磨。她就那樣靜靜地躺著，像睡著了一般庆尘。火紅的嫁衣襯著肌膚如雪剃诅。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,370評論 1贊 302
城市分裂傳說
那天驶忌，我揣著相機與錄音矛辕，去河邊找鬼。笑死付魔，一個胖子當著我的面吹牛聊品，可吹牛的內容都是我干的。我是一名探鬼主播几苍，決...
沈念sama閱讀 40,193評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼翻屈，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了妻坝？” 一聲冷哼從身側響起伸眶，我...
開封第一講書人閱讀 39,074評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎刽宪，沒想到半個月后厘贼，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經...
沈念sama閱讀 45,505評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡圣拄，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 37,722評論 3贊 335
?白月光啟示錄
正文我和宋清朗相戀三年嘴秸，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片售担。...
茶點故事閱讀 39,841評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡赁遗，死狀恐怖，靈堂內的尸體忽然破棺而出族铆，到底是詐尸還是另有隱情岩四，我是刑警寧澤，帶...
沈念sama閱讀 35,569評論 5贊 345
?日本核電站爆炸內幕
正文年R本政府宣布哥攘，位于F島的核電站剖煌，受9級特大地震影響，放射性物質發(fā)生泄漏逝淹。R本人自食惡果不足惜耕姊，卻給世界環(huán)境...
茶點故事閱讀 41,168評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望栅葡。院中可真熱鬧茉兰，春花似錦、人聲如沸欣簇。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,783評論 0贊 22
一樁弒父案坯约，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至莫鸭，卻和暖如春闹丐，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背被因。一陣腳步聲響...
開封第一講書人閱讀 32,918評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工卿拴，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人梨与。一個月前我還...
沈念sama閱讀 47,962評論 2贊 370
代替公主和親
正文我出身青樓堕花，卻偏偏與公主長得像，于是被迫代替她去往敵國和親粥鞋。傳聞我的和親對象是個殘疾皇子航徙，可洞房花燭夜當晚...
茶點故事閱讀 44,781評論 2贊 354

Vue2.0系列（三畅哑、vue-router）附SPA案例