- 路由的基本用法
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); }