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);
}