Vue2.0 仿餓了麼商家詳情頁面（二）

1. 路由的基本用法

vue1.0和vue2.0的vue-router在使用上有所差異

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
//
Vue.use(router);
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
    el: '#app',
    components: { App },
    router,
    template: '<App/>'
});

router.push('/goods');

App.vue

<div class="tab">
    <div class="tab-item"><router-link to="/goods"><div class="tab-title">商品</div></router-link></div>
    <div class="tab-item"><router-link to="/ratings"><div class="tab-title">評價</div></router-link></div>
    <div class="tab-item"><router-link to="/seller"><div class="tab-title">商家</div></router-link></div>
</div>
<router-view></router-view>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'

import Goods from '../components/goods/goods'
import Ratings from '../components/ratings/ratings'
import Seller from '../components/seller/seller'

Vue.use(Router);

const routes = [
    {
        path: '/goods',
        component: Goods
    },{
        path: '/ratings',
        component: Ratings
    },{
        path: '/seller',
        component: Seller
    }];

export default new Router({
    routes,
    linkActiveClass: 'active'
});

components/goods/goods.vue

<template>
    <div>goods</div>
</template>

<script>
    export default {}
</script>

<style scoped>

</style>

2. 設置默認路由

router.go('/goods');

該語句在vue2.0中會導致頁面一直不斷的刷新，原因：

同history.go, router.go接受的參數應該爲Number， 例如：

// 上一頁
history.go(-1)
router.go(-1)

解決方法：

（1）改用router.push('/goods');

（2）在路由設置時加上默認路由的配置：

{
    path: '/',
    component: Goods
}

3.  彈性佈局的基本用法（等分）

在tab欄中，三個選項按鈕等分並且文字居中顯示

.tab {
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
}

.tab > .tab-item {
    flex: 1;
    text-align: center;
}

注：其他關於flex佈局的知識之後需要繼續深入學習

4. a標籤選中狀態的樣式

注：

（1）使用<router-link>標籤時要注意，vue會將該標籤替換爲a標籤，所以爲router-link或a標籤設置的css樣式都不會生效。

（2）凡是通過<router-link>轉換成的<a>標籤，在選中時vue都會爲其增加一個名爲router-link-active的類，可通過該類名來設置選中時的狀態

（3）若要修改該默認類名，可在配置路由時通過linkActiveClass屬性來重命名

router/index.js

export default new Router({
    routes,
    linkActiveClass: 'active'
});

這樣，我們在設置樣式時，就能用.active來替代繁瑣的.router-link-active了

.tab .active > .tab-title {
    color: rgb(240,20,20);
}